import { cn } from "@/lib/utils";
import { ArrowRight, LucideIcon } from "lucide-react";

interface OptionProps {
  icon: LucideIcon;
  title: string;
  description: string;
  onClick?: () => void;
  colorClass: string; // ex: "bg-emerald-500"
}

export const ValiderFacture: React.FC<OptionProps> = ({
  icon: Icon, 
  title,
  description,
  onClick,
  colorClass,
}) => (
  <button
    onClick={onClick}
    className={cn(
      "group relative w-full text-left rounded-2xl border",
      "border-gray-200 bg-white p-4",
      "transition-all duration-200",
      "hover:border-emerald-500 hover:bg-gray-50",
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
    )}
  >
    {/* Accent gauche */}
    <span
      className={cn(
        "absolute left-0 top-0 h-full w-1 rounded-l-2xl",
        colorClass
      )}
    />

    <div className="flex items-start gap-4">
      {/* Icône */}
      <div
        className={cn(
          "flex h-11 w-11 items-center justify-center rounded-xl",
          "bg-gray-100 transition-transform duration-200",
          "group-hover:scale-105"
        )}
      >
        <Icon
          className={cn(
            "h-6 w-6",
            colorClass.replace("bg-", "text-")
          )}
        />
      </div>

      {/* Contenu */}
      <div className="flex-1">
        <h4 className="flex items-center gap-2 font-semibold text-gray-900">
          {title}
          <ArrowRight className="h-4 w-4 translate-x-[-4px] opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100" />
        </h4>
        <p className="mt-1 text-sm leading-relaxed text-gray-500">
          {description}
        </p>
      </div>
    </div>
  </button>
);
