'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useRouter } from 'next/navigation';

export default function VisualizacaoFuncionario() {
  const router = useRouter();

  const funcionario = {
    nome: 'João da Silva',
    cargo: 'Motorista',
    telefone: '(11) 91234-5678',
    status: 'Ativo',
    foto: '/assets/img/funcionarios/funcionario-demo.png',
  };

  const statusColor = {
    Ativo: 'bg-green-600',
    Férias: 'bg-yellow-500',
    Afastado: 'bg-orange-500',
    Inativo: 'bg-red-600',
  };

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold text-center mb-6">Visualização do Funcionário</h1>

      <Card className="shadow-xl">
        <CardContent className="p-6 flex flex-col items-center text-center space-y-4">

          <img
            src={funcionario.foto}
            alt="Foto do Funcionário"
            className="w-36 h-36 rounded-full object-cover border shadow"
          />

          <div className="space-y-1">
            <h2 className="text-2xl font-semibold">{funcionario.nome}</h2>
            <p className="text-lg">{funcionario.cargo}</p>
            <p className="text-gray-500">{funcionario.telefone}</p>
            <Badge className={`${statusColor[funcionario.status]} text-white`}>
              {funcionario.status}
            </Badge>
          </div>

          <div className="pt-4">
            <Button onClick={() => router.push('/funcionarios/edicao_funcionario')}>Editar</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
