// pages/rh/historico_funcionario.tsx
import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export default function HistoricoFuncionario() {
  const [cpf, setCpf] = useState("");
  const [dados, setDados] = useState<any[]>([]);

  const handleBuscar = () => {
    // Simulação de histórico
    setDados([
      { data: "2023-01-15", tipo: "Admissão", observacao: "Contrato CLT" },
      { data: "2023-06-10", tipo: "Férias", observacao: "Período aquisitivo completo" },
      { data: "2024-01-05", tipo: "Avaliação", observacao: "Desempenho excelente" }
    ]);
  };

  return (
    <div className="p-6">
      <h1 className="text-xl font-bold mb-4">Histórico do Funcionário</h1>
      <Card className="mb-4">
        <CardContent className="flex gap-4 pt-4">
          <Input
            placeholder="CPF do funcionário"
            value={cpf}
            onChange={(e) => setCpf(e.target.value)}
          />
          <Button onClick={handleBuscar}>Buscar Histórico</Button>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="pt-4">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Data</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead>Observação</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {dados.map((item, i) => (
                <TableRow key={i}>
                  <TableCell>{item.data}</TableCell>
                  <TableCell>{item.tipo}</TableCell>
                  <TableCell>{item.observacao}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}
