import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../lib/cn";

const iconButtonVariants = cva(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ctp-blue focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        primary: "",
        secondary: "",
        outline: "border border-ctp-surface1 bg-transparent",
        ghost: "",
        destructive: "",
      },
      size: {
        xs: "h-6 w-6 text-xs",
        sm: "h-8 w-8 text-sm",
        md: "h-10 w-10",
        lg: "h-12 w-12 text-lg",
      },
      showColorOnHover: {
        true: "",
        false: "",
      },
    },
    compoundVariants: [
      // Primary variants
      {
        variant: "primary",
        showColorOnHover: true,
        className: "text-ctp-text hover:bg-ctp-blue hover:text-ctp-base",
      },
      {
        variant: "primary",
        showColorOnHover: false,
        className: "bg-ctp-blue text-ctp-base hover:bg-ctp-blue/90",
      },
      // Secondary variants
      {
        variant: "secondary",
        showColorOnHover: true,
        className: "text-ctp-text hover:bg-ctp-surface1",
      },
      {
        variant: "secondary",
        showColorOnHover: false,
        className: "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface1/80",
      },
      // Outline variants
      {
        variant: "outline",
        showColorOnHover: true,
        className: "text-ctp-text hover:bg-ctp-surface0 hover:border-ctp-blue",
      },
      {
        variant: "outline",
        showColorOnHover: false,
        className: "text-ctp-text hover:bg-ctp-surface0",
      },
      // Ghost variants
      {
        variant: "ghost",
        showColorOnHover: true,
        className: "text-ctp-text hover:bg-ctp-surface0",
      },
      {
        variant: "ghost",
        showColorOnHover: false,
        className: "text-ctp-text hover:bg-ctp-surface0",
      },
      // Destructive variants
      {
        variant: "destructive",
        showColorOnHover: true,
        className: "text-ctp-text hover:bg-ctp-red hover:text-ctp-base",
      },
      {
        variant: "destructive",
        showColorOnHover: false,
        className: "bg-ctp-red text-ctp-base hover:bg-ctp-red/90",
      },
    ],
    defaultVariants: {
      variant: "ghost",
      size: "md",
      showColorOnHover: true,
    },
  },
);

interface IconButtonProps extends VariantProps<typeof iconButtonVariants> {
  icon: React.ReactNode;
  label: string;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

export const IconButton = ({
  icon,
  label,
  onClick,
  disabled = false,
  variant = "ghost",
  size = "md",
  className = "",
  showColorOnHover = true,
}: IconButtonProps) => {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      aria-label={label}
      className={cn(
        iconButtonVariants({ variant, size, showColorOnHover }),
        className,
      )}
    >
      {icon}
    </button>
  );
};