// pages/rh/visualizacao_funcionario.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

export default function VisualizacaoFuncionario() {
  const funcionario = {
    nome: "Carlos da Silva",
    cargo: "Motorista",
    foto: "/assets/img/funcionario-demo.jpg",
    email: "carlos@empresa.com",
    telefone: "(11) 99999-8888",
    endereco: "Rua Exemplo, 123 - Jandira/SP",
    rg: "12.345.678-9",
    cpf: "123.456.789-00",
    pis: "123.45678.90-1",
    cnh: "ABC123456789",
    validadeCnh: "2027-05-01",
    exames: "Apto - 2024/01",
    observacoes: "Funcionário pontual e experiente.",
    avaliacoes: "Última avaliação positiva. Bom desempenho nas entregas.",
  };

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-4">Visualização de Funcionário</h2>
      <Card>
        <CardContent className="p-6">
          <Tabs defaultValue="perfil">
            <TabsList className="mb-4">
              <TabsTrigger value="perfil">Perfil</TabsTrigger>
              <TabsTrigger value="documentos">Documentação</TabsTrigger>
              <TabsTrigger value="avaliacoes">Avaliações</TabsTrigger>
              <TabsTrigger value="observacoes">Observações</TabsTrigger>
            </TabsList>

            <TabsContent value="perfil">
              <div className="flex flex-col md:flex-row gap-6">
                <img
                  src={funcionario.foto}
                  alt={funcionario.nome}
                  className="w-40 h-40 rounded-full object-cover border"
                />
                <div>
                  <p><strong>Nome:</strong> {funcionario.nome}</p>
                  <p><strong>Cargo:</strong> {funcionario.cargo}</p>
                  <p><strong>Email:</strong> {funcionario.email}</p>
                  <p><strong>Telefone:</strong> {funcionario.telefone}</p>
                  <p><strong>Endereço:</strong> {funcionario.endereco}</p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="documentos">
              <p><strong>RG:</strong> {funcionario.rg}</p>
              <p><strong>CPF:</strong> {funcionario.cpf}</p>
              <p><strong>PIS:</strong> {funcionario.pis}</p>
              <p><strong>CNH:</strong> {funcionario.cnh}</p>
              <p><strong>Validade CNH:</strong> {funcionario.validadeCnh}</p>
              <p><strong>Exames Médicos:</strong> {funcionario.exames}</p>
            </TabsContent>

            <TabsContent value="avaliacoes">
              <p>{funcionario.avaliacoes}</p>
            </TabsContent>

            <TabsContent value="observacoes">
              <p>{funcionario.observacoes}</p>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

      <div className="mt-4 flex gap-4">
        <Button variant="outline">Editar</Button>
        <Button variant="destructive">Excluir</Button>
      </div>
    </div>
  );
}
