interface JobCardProps {
  title: string;
  company: string;
  matchScore: number;
  matchReason: string; // ex: "Correspond à votre expérience..."
  image: string;
  tags: string[]; // ex: ["Nuit", "Physique"]
}

export default function JobCard({ title, company, matchScore, matchReason, image, tags }: JobCardProps) {
  return (
    <div className="bg-white dark:bg-[#1a202c] rounded-2xl overflow-hidden shadow-md border border-[#dbe0e6] dark:border-[#2d3748] flex flex-col group hover:border-primary transition-all">
      {/* Image & Badge */}
      <div 
        className="h-48 bg-cover bg-center relative" 
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div className="absolute top-4 right-4 bg-white/90 dark:bg-gray-900/90 rounded-full px-3 py-1 text-sm font-black text-primary shadow-sm backdrop-blur-sm">
          {matchScore}% Match
        </div>
      </div>

      {/* Contenu */}
      <div className="p-6 flex flex-col flex-1">
        <h4 className="text-xl font-bold mb-1 text-[#111418] dark:text-white">{title}</h4>
        <p className="text-[#617589] dark:text-gray-400 font-medium mb-4">{company}</p>
        
        {/* Bulle d'info Match */}
        <div className="bg-blue-50 dark:bg-blue-900/10 p-3 rounded-lg mb-6 flex items-start gap-2">
          <span className="material-symbols-outlined text-primary text-xl">info</span>
          <p className="text-sm text-blue-800 dark:text-blue-300">
            {matchReason}
          </p>
        </div>

        {/* Boutons d'action */}
        <div className="mt-auto flex items-center justify-between gap-3">
          <button className="flex-1 py-3 bg-primary/10 text-primary rounded-xl font-bold hover:bg-primary hover:text-white transition-all">
            Postuler
          </button>
          <button className="px-4 py-3 border border-[#dbe0e6] dark:border-[#2d3748] rounded-xl text-gray-400 hover:text-primary hover:border-primary transition-colors">
            <span className="material-symbols-outlined">bookmark</span>
          </button>
        </div>
      </div>
    </div>
  );
}