interface Props {
  nom: string
  categorie: string
  icon: string
  actif?: boolean
  onClick?: () => void
}

export default function CarteMetier({
  nom,
  categorie,
  icon,
  actif,
  onClick
}: Props) {

  return (

    <button
      onClick={onClick}
      className={`group flex flex-col items-center p-8 rounded-xl border-2 transition-all duration-300 transform hover:scale-105
      
      ${
        actif
          ? "border-primary bg-primary/5 shadow-lg"
          : "border-transparent hover:border-primary/30 bg-white dark:bg-slate-900"
      }
      `}
    >

      {/* Icône */}
      <div className="w-20 h-20 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary/10 transition">

        <span className="material-symbols-outlined text-4xl text-primary">
          {icon}
        </span>

      </div>

      <span className="text-lg font-bold">
        {nom}
      </span>

      <span className="text-xs text-slate-400 mt-1 uppercase tracking-widest">
        {categorie}
      </span>

      {/* Check animation */}
      {actif && (
        <span className="material-symbols-outlined text-green-500 mt-3 animate-pulse">
          check_circle
        </span>
      )}

    </button>
  )
}