'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Users } from 'lucide-react';
import Link from 'next/link';

const funcionariosDemo = [
  {
    id: '1',
    nome: 'João da Silva',
    cargo: 'Motorista',
    telefone: '(11) 91234-5678',
    status: 'ativo',
    foto: '/assets/img/funcionarios/funcionario-demo.png',
  },
  {
    id: '2',
    nome: 'Maria Oliveira',
    cargo: 'Administrativo',
    telefone: '(11) 97890-1234',
    status: 'ferias',
    foto: '/assets/img/funcionarios/funcionario-demo.png',
  },
  {
    id: '3',
    nome: 'Carlos Souza',
    cargo: 'Motorista Apoio',
    telefone: '(11) 99888-7777',
    status: 'afastado',
    foto: '/assets/img/funcionarios/funcionario-demo.png',
  },
];

const statusColors: Record<string, string> = {
  ativo: 'bg-green-500',
  ferias: 'bg-yellow-500',
  afastado: 'bg-orange-500',
  inativo: 'bg-gray-400',
};

export default function ListagemFuncionarios() {
  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold flex items-center gap-2">
          <Users size={28} />
          Funcionários
        </h1>
        <Link href="/funcionarios/cadastro_funcionario">
          <Button variant="default">Novo Funcionário</Button>
        </Link>
      </div>

      <ScrollArea className="h-[70vh]">
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
          {funcionariosDemo.map((func) => (
            <Card key={func.id} className="shadow-lg border">
              <CardContent className="p-4 flex flex-col items-center text-center">
                <img
                  src={func.foto}
                  alt={func.nome}
                  className="w-24 h-24 rounded-full object-cover border shadow mb-4"
                />
                <h2 className="text-xl font-bold">{func.nome}</h2>
                <p className="text-sm text-muted-foreground">{func.cargo}</p>
                <p className="text-sm mt-1">{func.telefone}</p>
                <Badge className={`mt-2 ${statusColors[func.status]}`}>{func.status}</Badge>

                <div className="flex gap-2 mt-4">
                  <Link href={`/funcionarios/visualizacao_funcionario?id=${func.id}`}>
                    <Button size="sm" variant="outline">Visualizar</Button>
                  </Link>
                  <Link href={`/funcionarios/edicao_funcionario?id=${func.id}`}>
                    <Button size="sm" variant="secondary">Editar</Button>
                  </Link>
                  <Button size="sm" variant="destructive">Excluir</Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}
