import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../../../@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center rounded-lg justify-center border border-transparent whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-0 transition duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-100",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        primary:
          "bg-primary-500 hover:bg-primary-600 text-white focus:outline focus:outline-4  focus:outline-primary-100 disabled:bg-mono-100  disabled:border-mono-200 disabled:text-mono-400",
        error:
          "bg-error-500 hover:bg-error-600 text-white disabled:bg-mono-100  disabled:border-mono-200 disabled:text-mono-400 focus:shadow-[0px_0px_0px_4px_rgba(240,68,56,0.24),0px_1px_2px_0px_rgba(16,24,40,0.05)]",
        "primary-outline":
          "bg-primary-25 hover:bg-primary-50 text-primary-600 focus:outline focus:bg-primary-50 focus:outline-2 focus:outline-primary-300 disabled:bg-white disabled:border-mono-200 disabled:text-mono-400",
        "primary-tertiary":
          "text-primary-500 hover:text-primary-700 hover:bg-primary-50 focus:text-primary-500 disabled:text-mono-400",
        "primary-link":
          "text-primary-500 hover:text-primary-700  focus:text-primary-500 disabled:text-mono-400 !px-0 !py-0",
        "gray-outline":
          "bg-white border border-mono-300 text-mono-700 hover:bg-mono-50 hover:text-mono-800 focus:bg-white focus:text-mono-700 focus:shadow-[0px_0px_0px_4px_rgba(152,162,179,0.14),0px_1px_2px_0px_rgba(16,24,40,0.05)] disabled:border-mono-200 disabled:text-mono-400",
        "gray-tertiary":
          "text-mono-600 hover:bg-mono-50 hover:text-mono-700 focus:bg-transparent focus:text-mono-600 disabled:text-mono-400",
        "gray-link":
          "text-mono-600 hover:text-mono-700  focus:text-mono-600 disabled:text-mono-400 !px-0 !py-0",
        "error-outline":
          "hover:bg-error-50 text-error-600 hover:text-error-800 border border-error-300 focus:bg-white focus:focus:shadow-[0px_0px_0px_4px_rgba(240,68,56,0.24),0px_1px_2px_0px_rgba(16,24,40,0.05)] disabled:bg-white disabled:border-mono-200 disabled:text-mono-400",
        "error-tertiary":
          "hover:bg-error-50 text-error-600 hover:text-error-800 focus:outline-none focus:text-error-600 focus:bg-white disabled:bg-white  disabled:text-mono-400",
        "error-link":
          "text-error-600 hover:text-error-800 focus:text-error-600 disabled:text-mono-400 !px-0 !py-0",
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
        nav: 'font-manrope text-mono-500 bg-background hover:bg-hover hover:text-hover-foreground',
        simple: 'text-primary',
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "py-2 px-3 gap-1.5 text-sm font-semibold",
        md: "px-3.5 py-2.5 gap-1.5 text-sm font-semibold",
        lg: "h-11 px-4 py-2.5 gap-2 text-base font-semibold",
        xl: "h-12 px-4.5 py-3 gap-2 text-base font-semibold",
        "2xl": "h-15 px-5.5 py-4 gap-3 text-lg font-semibold",
        "icon-sm": "p-2",
        "icon-md": "p-2.5",
        "icon-lg": "p-3",
        "icon-xl": "p-3.5",
        "icon-2xl": "p-4",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "sm",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  active?: boolean;
  children?: any;
  asChild?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant,
      size,
      children = "",
      asChild = false,
      leftIcon = false,
      rightIcon = false,
      active,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(
          buttonVariants({ variant, size, className }),
          active ? "bg-hover text-hover-foreground" : ""
        )}
        ref={ref}
        {...props}
      >
        {leftIcon}
        {children}
        {rightIcon}
      </Comp>
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };
