import React from 'react';

/**
 * COMPONENTE: ResponsiveTable
 * 
 * Descrição: Tabela responsiva com 4 colunas que exibe dados de funcionários
 * 
 * Recursos:
 * - Design responsivo com scroll horizontal em telas pequenas
 * - Separação visual destacada entre colunas
 * - Efeito hover nas linhas
 * - Linhas alternadas para melhor leitura
 * - Badges coloridos para status
 * 
 * @returns {JSX.Element} Componente de tabela responsiva
 */
export default function ResponsiveTable() {
  // Array de dados mockados - substitua com dados reais da API ou props
  const data = [
    { id: 1, nome: 'João Silva', email: 'joao@email.com', cargo: 'Desenvolvedor', status: 'Ativo' },
    { id: 2, nome: 'Maria Santos', email: 'maria@email.com', cargo: 'Designer', status: 'Ativo' },
    { id: 3, nome: 'Pedro Oliveira', email: 'pedro@email.com', cargo: 'Gerente', status: 'Inativo' },
    { id: 4, nome: 'Ana Costa', email: 'ana@email.com', cargo: 'Analista', status: 'Ativo' },
    { id: 5, nome: 'Carlos Souza', email: 'carlos@email.com', cargo: 'Coordenador', status: 'Ativo' },
  ];

  return (
    // Container principal com gradiente de fundo e padding responsivo
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 sm:p-8">
      {/* Container centralizado com largura máxima */}
      <div className="max-w-6xl mx-auto">
        
        {/* Título da tabela */}
        <h1 className="text-3xl font-bold text-gray-800 mb-6 text-center">
          Tabela de Funcionários
        </h1>
        
        {/* Card branco com sombra para envolver a tabela */}
        <div className="bg-white rounded-lg shadow-xl overflow-hidden">
          
          {/* Wrapper com overflow-x-auto permite scroll horizontal em telas pequenas */}
          <div className="overflow-x-auto">
            
            {/* Tabela principal - w-full garante 100% de largura */}
            <table className="w-full">
              
              {/* Cabeçalho da tabela */}
              <thead>
                <tr className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
                  {/* 
                    Cada <th> representa uma coluna do cabeçalho
                    - px-6 py-4: padding horizontal e vertical
                    - text-left: alinhamento à esquerda
                    - border-r-2: borda direita de 2px para separação visual
                    - uppercase tracking-wider: texto maiúsculo com espaçamento
                  */}
                  <th className="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider border-r-2 border-blue-400">
                    Nome
                  </th>
                  <th className="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider border-r-2 border-blue-400">
                    Email
                  </th>
                  <th className="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider border-r-2 border-blue-400">
                    Cargo
                  </th>
                  {/* Última coluna sem borda direita */}
                  <th className="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">
                    Status
                  </th>
                </tr>
              </thead>
              
              {/* Corpo da tabela */}
              <tbody className="divide-y divide-gray-200">
                {/* 
                  Loop através dos dados usando map()
                  - key={item.id}: chave única para cada linha (obrigatório no React)
                  - index: índice usado para cores alternadas
                */}
                {data.map((item, index) => (
                  <tr 
                    key={item.id}
                    className={`${
                      // Operador ternário para alternar cores de fundo
                      index % 2 === 0 ? 'bg-gray-50' : 'bg-white'
                    } hover:bg-blue-50 transition-colors duration-200`}
                  >
                    {/* 
                      COLUNA 1: Nome
                      - whitespace-nowrap: impede quebra de linha
                      - border-r-2: borda direita para separação
                    */}
                    <td className="px-6 py-4 whitespace-nowrap border-r-2 border-gray-200">
                      <div className="text-sm font-medium text-gray-900">{item.nome}</div>
                    </td>
                    
                    {/* COLUNA 2: Email */}
                    <td className="px-6 py-4 whitespace-nowrap border-r-2 border-gray-200">
                      <div className="text-sm text-gray-600">{item.email}</div>
                    </td>
                    
                    {/* COLUNA 3: Cargo */}
                    <td className="px-6 py-4 whitespace-nowrap border-r-2 border-gray-200">
                      <div className="text-sm text-gray-900">{item.cargo}</div>
                    </td>
                    
                    {/* 
                      COLUNA 4: Status
                      Badge colorido baseado no status
                      - Verde para "Ativo"
                      - Vermelho para "Inativo"
                    */}
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        item.status === 'Ativo' 
                          ? 'bg-green-100 text-green-800'  // Classes para status ativo
                          : 'bg-red-100 text-red-800'       // Classes para status inativo
                      }`}>
                        {item.status}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
</div>
        
        {/* Texto informativo sobre responsividade */}
        <div className="mt-4 text-center text-sm text-gray-600">
          <p>📱 Responsivo: role horizontalmente em telas pequenas</p>
        </div>
</div>
    </div>
  );
}

/**
 * CLASSES TAILWIND UTILIZADAS:
 * 
 * LAYOUT E ESPAÇAMENTO:
 * - min-h-screen: altura mínima da tela
 * - max-w-6xl: largura máxima de 72rem
 * - mx-auto: margin horizontal automático (centraliza)
 * - p-4, p-8: padding de 1rem e 2rem
 * - px-6, py-4: padding horizontal e vertical
 * - mt-4, mb-6: margin top e bottom
 * 
 * CORES E FUNDOS:
 * - bg-gradient-to-br: gradiente diagonal
 * - from-blue-50 to-indigo-100: cores do gradiente
 * - bg-white, bg-gray-50: cores de fundo
 * - text-gray-800, text-white: cores de texto
 * 
 * BORDAS E SOMBRAS:
 * - rounded-lg: bordas arredondadas
 * - shadow-xl: sombra extra grande
 * - border-r-2: borda direita de 2px
 * - divide-y: divide linhas com bordas
 * 
 * TIPOGRAFIA:
 * - text-3xl, text-sm, text-xs: tamanhos de fonte
 * - font-bold, font-semibold, font-medium: pesos da fonte
 * - uppercase: texto em maiúsculas
 * - tracking-wider: espaçamento entre letras
 * 
 * RESPONSIVIDADE:
 * - sm:p-8: padding de 2rem em telas pequenas e maiores
 * - overflow-x-auto: scroll horizontal quando necessário
 * - whitespace-nowrap: impede quebra de texto
 * 
 * INTERATIVIDADE:
 * - hover:bg-blue-50: cor ao passar o mouse
 * - transition-colors: transição suave de cores
 * - duration-200: duração da transição de 200ms
 * 
 * PERSONALIZAÇÃO:
 * Para customizar, altere:
 * 1. Array 'data' com seus dados
 * 2. Classes 'from-blue-600' e 'to-indigo-600' para mudar cores
 * 3. Adicione/remova colunas no <thead> e <tbody>
 * 4. Ajuste padding (px-*, py-*) para espaçamento diferente
 */