import * as React from "react";
import { Slot } from "@radix-ui/react-slot";

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
  variant?:
    | "primary"
    | "dark"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link";
  size?: "sm" | "lg" | "xl" | "icon";
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    const variantStyles =
      variant === "primary"
        ? "bg-WHITE2 text-BLACK hover:bg-WHITE3"
        : variant === "dark"
          ? "bg-BLACK text-WHITE hover:bg-BLACK2"
          : variant === "destructive"
            ? "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90"
            : variant === "outline"
              ? "border text-BLACK border-BLACK bg-WHITE2 hover:bg-WHITE3 focus:border-primary focus:ring-2 focus:ring-primary/20"
              : variant === "secondary"
                ? "bg-WHITE2 text-BLACK hover:bg-WHITE3"
                : variant === "ghost"
                  ? "hover:bg-accent hover:text-accent-foreground"
                  : variant === "link"
                    ? "text-primary underline-offset-4 hover:underline"
                    : "";

    const sizeStyles =
      size === "sm"
        ? "h-10 rounded-[12px] px-4 text-R16"
        : size === "lg"
          ? "h-12 rounded-[12px] px-4 py-2 text-R12"
          : size === "xl"
            ? "h-[55px] rounded-[12px] px-8 py-2 text-B16 font-bold"
            : size === "icon"
              ? "w-9"
              : "";
    return (
      <Comp
        className={`inline-flex border items-center justify-center gap-2 whitespace-nowrap transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 ${variantStyles} ${sizeStyles} ${className}`}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button };