interface ProfileCardProps {
  title: string;
  status: "Actif" | "Brouillon";
  target: string;
  lastUpdated: string;
  strength: number;
  image: string;
}

export default function ProfileCard({ title, status, target, lastUpdated, strength, image }: ProfileCardProps) {
  const isDraft = status === "Brouillon";
  
  // Couleurs dynamiques selon le statut
  const statusBg = isDraft ? "bg-gray-100 dark:bg-gray-800" : "bg-emerald-100 dark:bg-emerald-900/40";
  const statusText = isDraft ? "text-gray-700 dark:text-gray-400" : "text-emerald-700 dark:text-emerald-400";
  const barColor = isDraft ? "bg-amber-500" : "bg-primary";
  const strengthTextColor = isDraft ? "text-amber-500" : "text-primary";

  return (
    <div className="bg-white dark:bg-[#1a202c] border border-[#dbe0e6] dark:border-[#2d3748] rounded-xl overflow-hidden shadow-sm group hover:border-primary transition-all">
      <div className="flex flex-col sm:flex-row p-5 gap-6">
        <div
          className={`size-32 bg-center bg-no-repeat bg-cover rounded-xl shrink-0 ${isDraft ? 'opacity-80' : ''}`}
          style={{ backgroundImage: `url("${image}")` }}
        ></div>
        <div className="flex-1 flex flex-col justify-between py-1">
          <div>
            <div className="flex justify-between items-start">
              <p className="text-[#111418] dark:text-white text-xl font-bold mb-1">
                {title}
              </p>
              <span className={`px-2 py-0.5 text-[10px] font-bold rounded uppercase ${statusBg} ${statusText}`}>
                {status}
              </span>
            </div>
            <p className="text-[#617589] dark:text-gray-400 text-sm">
              Cible : {target}
            </p>
            <p className="text-[#617589] dark:text-gray-400 text-[12px] mt-1 italic">
              {lastUpdated}
            </p>
          </div>
          <div className="mt-4">
            <div className="flex justify-between items-end text-xs mb-1.5">
              <span className="text-[#111418] dark:text-white font-bold">Force du profil</span>
              <span className={`${strengthTextColor} font-bold`}>{strength}%</span>
            </div>
            <div className="w-full bg-[#f0f2f4] dark:bg-[#2d3748] h-3 rounded-full overflow-hidden">
              <div className={`${barColor} h-full rounded-full`} style={{ width: `${strength}%` }}></div>
            </div>
          </div>
        </div>
      </div>
      <div className="bg-[#f8fafc] dark:bg-[#2d3748]/30 px-5 py-3 border-t border-[#dbe0e6] dark:border-[#2d3748] flex justify-end gap-3">
        <button className="px-4 py-2 text-sm font-bold text-[#617589] dark:text-gray-400 hover:text-primary transition-colors">
          {isDraft ? "Supprimer" : "Modifier"}
        </button>
        <button className={`px-5 py-2 rounded-lg text-sm font-bold shadow-sm ${isDraft ? 'bg-primary/10 text-primary hover:bg-primary hover:text-white' : 'bg-primary text-white shadow-primary/30'}`}>
          {isDraft ? "Continuer" : "Mettre en ligne"}
        </button>
      </div>
    </div>
  );
}