// pages/rh/listagem_funcionarios.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 { Separator } from "@/components/ui/separator";

const funcionarios = [
  {
    id: "1",
    nome: "Carlos da Silva",
    cargo: "Motorista",
    telefone: "(11) 99999-8888",
    foto: "/assets/img/funcionario-demo.jpg",
  },
  {
    id: "2",
    nome: "Marina Lopes",
    cargo: "Administrativa",
    telefone: "(11) 91234-5678",
    foto: "/assets/img/funcionario-demo.jpg",
  },
];

export default function ListagemFuncionarios() {
  const [filtro, setFiltro] = useState("");

  const filtrados = funcionarios.filter((f) =>
    f.nome.toLowerCase().includes(filtro.toLowerCase())
  );

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-4">Funcionários</h2>

      <div className="flex items-center gap-4 mb-6">
        <Input
          placeholder="Buscar por nome..."
          value={filtro}
          onChange={(e) => setFiltro(e.target.value)}
          className="w-full max-w-md"
        />
        <Button variant="default">Cadastrar Novo</Button>
      </div>

      <Separator className="mb-4" />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filtrados.map((func) => (
          <Card key={func.id} className="shadow-md hover:shadow-lg transition">
            <CardContent className="p-4 flex gap-4">
              <img
                src={func.foto}
                alt={func.nome}
                className="w-20 h-20 rounded-full object-cover border"
              />
              <div className="flex flex-col justify-between">
                <div>
                  <p className="text-lg font-semibold">{func.nome}</p>
                  <p className="text-sm text-gray-600">{func.cargo}</p>
                  <p className="text-sm">{func.telefone}</p>
                </div>
                <div className="mt-2 flex gap-2">
                  <Button size="sm" variant="outline">
                    Visualizar
                  </Button>
                  <Button size="sm" variant="secondary">
                    Editar
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
