import { Slot } from "@radix-ui/react-slot";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { forwardRef } from "react";

import { cn } from "@/libs/utils";

import type { LIconProps } from "../lucid-icon/lucid-icon";
import LIcon from "../lucid-icon/lucid-icon";
import styles from "./button.module.css";

const buttonVariants = cva(styles.button, {
  variants: {
    variant: {
      default: styles.apply,
      destructive: styles.destructive,
      outline: styles.outline,
      secondary: styles.secondary,
      ghost: styles.ghost,
      link: styles.link,
      primary: styles.primary,
      "outline-primary": styles["outline-primary"],
      "primary-text": styles["primary-text"],
      success: styles.success,
      "outline-success": styles["outline-success"],
      error: styles.error,
      "outline-error": styles["outline-error"],
      disable: styles.disable,
    },
    size: {
      md: styles.md,
      sm: styles.sm,
      lg: styles.lg,
      xl: styles.xl,
      "2xl": styles["2xl"],
      icon: styles.icon,
    },
  },
  defaultVariants: {
    variant: "default",
    size: "md",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
  isDisabled?: boolean;
  leftIcon?: LIconProps;
  rightIcon?: LIconProps;
  loading?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant,
      size,
      asChild = false,
      isDisabled,
      leftIcon,
      rightIcon,
      children,
      loading,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(
          buttonVariants({
            variant: isDisabled ? "disable" : variant,
            size,
            className,
          }),
          leftIcon && styles["left-icon"],
          rightIcon && styles["right-icon"],
          loading && cn(styles["loading-icon"], styles["right-icon"]),
        )}
        ref={ref}
        {...props}
      >
        {leftIcon && <LIcon size={12} {...leftIcon} />}
        {children}
        {loading ? (
          <LIcon
            size={12}
            name="Loader2"
            className={styles["loading-icon-animate"]}
          />
        ) : (
          rightIcon && <LIcon size={12} {...rightIcon} />
        )}
      </Comp>
    );
  },
);
Button.displayName = "Button";

export { Button, buttonVariants };