import { Barber } from '../types';
import { User } from 'lucide-react';

export const BarberList = ({ barbers }: { barbers: Barber[] }) => (
  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
    {barbers.map((b) => (
      <div
        key={b.id}
        className="flex flex-col items-center text-center gap-3 group cursor-pointer"
      >
        {/* Foto circular */}
        <div className="relative">
          <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white bg-slate-200 flex items-center justify-center shadow-md group-hover:border-amber-400 transition-colors duration-300">
            {b.imageUrl ? (
              <img
                src={b.imageUrl}
                alt={b.name}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
            ) : (
              <User size={36} className="text-slate-400" />
            )}
          </div>

        </div>

        {/* Nome */}
        <div>
          <p className="font-semibold text-sm text-slate-900 group-hover:text-amber-600 transition-colors leading-tight">
            {b.name}
          </p>
          {b.specialties.length > 0 ? (
            <p className="text-xs text-slate-400 mt-0.5 truncate max-w-[100px]">
              {b.specialties[0]}
            </p>
          ) : (
            <p className="text-xs text-slate-400 mt-0.5 italic">Especialista</p>
          )}
        </div>
      </div>
    ))}

    {barbers.length === 0 && (
      <div className="col-span-full py-20 text-center">
        <User size={48} className="mx-auto text-slate-300 mb-4" />
        <p className="text-slate-500 font-medium">Esta barbearia ainda não registou barbeiros.</p>
      </div>
    )}
  </div>
);