aegis/src/components/widgets/EvolutionOptionCard.tsx

import React from 'react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/utils/utils';
import type { EvolutionOption } from '@/data/evolutionOptions';

interface EvolutionOptionCardProps {
  option: EvolutionOption;
  isSubmitting: boolean;
  isDisabled: boolean;
  onSelect: (option: EvolutionOption) => void;
}

export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
  option,
  isSubmitting,
  isDisabled,
  onSelect
}) => {
  return (
    <div
      className={cn(
        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-300 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
        isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
      )}
    >
      <div>
        {/* En-tête de la carte */}
        <div className="flex items-center justify-between gap-2 mb-3">
          <span className="text-[11px] font-mono font-bold tracking-wider uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
            {option.categoryLabel}
          </span>
          {option.badgeText && (
            <span className="text-[10px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-100">
              {option.badgeText}
            </span>
          )}
        </div>

        {/* Titre & Description */}
        <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-900 transition-colors">
          {option.title}
        </h3>
        <p className="text-xs text-slate-600 mt-2 leading-relaxed">
          {option.description}
        </p>
      </div>

      {/* Bouton d'action */}
      <div className="mt-6 pt-4 border-t border-slate-100 flex justify-end">
        <Button
          size="sm"
          isLoading={isSubmitting}
          disabled={isDisabled}
          onClick={() => onSelect(option)}
          className="w-full sm:w-auto text-xs"
        >
          Engager cette initiative →
        </Button>
      </div>
    </div>
  );
};