import { cn } from "@xtablo/shared";
import { ReactNode } from "react";

export interface ActionCardProps {
  icon: ReactNode;
  label: string;
  description: string;
  variant?: "primary" | "default";
  isSelected?: boolean;
  disabled?: boolean;
  badge?: string;
  onClick?: () => void;
  className?: string;
}

export function ActionCard({
  icon,
  label,
  description,
  variant = "default",
  isSelected = false,
  disabled = false,
  badge,
  onClick,
  className,
}: ActionCardProps) {
  const isPrimary = variant === "primary";
  const isActive = !disabled && (isSelected || isPrimary);

  return (
    <button
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
      className={cn(
        "h-fit p-3 rounded-2xl text-left transition-all",
        disabled
          ? "bg-white dark:bg-gray-800 border border-[#EAECF0] dark:border-gray-700 opacity-50 cursor-not-allowed"
          : isSelected
            ? "bg-[rgb(128,78,236)] text-white border-transparent shadow-lg"
            : isPrimary
              ? "bg-primary text-white hover:shadow-lg"
              : "bg-white dark:bg-gray-800 border border-[#EAECF0] dark:border-gray-700 hover:shadow-md",
        className
      )}
    >
      <div className="flex items-center gap-3">
        <div
          className={cn(
            "w-10 h-10 rounded-[8px] flex items-center justify-center flex-shrink-0",
            isActive ? "bg-white/20" : "bg-[#F4F3FF] dark:bg-purple-900/20"
          )}
        >
          <span
            className={cn(
              "w-6 h-6 flex items-center justify-center",
              isActive ? "text-white" : "text-[#7F56D9]"
            )}
          >
            {icon}
          </span>
        </div>

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span
              className={cn(
                "font-semibold text-lg leading-tight",
                isActive ? "text-white" : "text-gray-900 dark:text-gray-100"
              )}
            >
              {label}
            </span>
            {badge && (
              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 leading-none shrink-0">
                {badge}
              </span>
            )}
          </div>
          <p
            className={cn(
              "text-sm mt-0.5",
              isActive ? "text-purple-100" : "text-gray-500 dark:text-gray-400"
            )}
          >
            {description}
          </p>
        </div>
      </div>
    </button>
  );
}
