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

interface TransformOptionProps {
   icon: LucideIcon;
   title: string;
   description: string;
   onClick?: () => void;
   colorClass: string;
}
export const TransformOption: React.FC<TransformOptionProps> = ({
   icon: Icon,
   title,
   description,
   onClick,
   colorClass,
}) => (
   <button
      onClick={onClick}
      className="w-full text-left p-4 rounded-xl border border-gray-200 hover:border-[#007E45] hover:bg-gray-50 transition-all group relative overflow-hidden"
   >
      <div className={cn("absolute top-0 left-0 w-1 h-full", colorClass)} />
      <div className="flex gap-4 items-start">
         <div
            className={cn(
               "p-3 rounded-xl bg-gray-100 group-hover:scale-110 transition-transform",
               colorClass.replace("bg-", "text-")
            )}
         >
            <Icon className="w-6 h-6" />
         </div>
         <div className="flex-1">
            <h4 className="flex gap-2 items-center font-semibold text-gray-900">
               {title}
               <ArrowRight className="w-4 h-4 opacity-0 transition-opacity group-hover:opacity-100" />
            </h4>
            <p className="mt-1 text-sm text-gray-500">{description}</p>
         </div>
      </div>
   </button>
);
