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 cursor-pointer font-bold whitespace-nowrap rounded-[8px] text-[18px] font-medium leading-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none box-border focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          "text-primary-dark hover:opacity-90 [background:var(--color-radial-gradient)]",
        "radial-gradient-white":
          "text-primary-dark hover:opacity-90 [background:var(--color-radial-gradient-white)]",
        destructive:
          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost:
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
        primary: "bg-primary-main text-white hover:bg-primary-dark",
      },
      size: {
        default: "px-3 py-2 sm:px-5.5 sm:py-3 items-center justify-center",
        sm: "px-3 py-2 sm:px-5.5 sm:py-3 items-center justify-center",
        lg: "px-3 py-2 sm:px-5.5 sm:py-3 items-center justify-center",
        icon: "px-3 py-2 sm:px-5.5 sm:py-3 items-center justify-center",
        "icon-sm": "px-3 py-2 sm:px-5.5 sm:py-3 items-center justify-center",
        "icon-lg": "px-3 py-2 sm:px-5.5 sm:py-3 items-center justify-center",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

function Button({
  className,
  variant = "default",
  size,
  asChild = false,
  style,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  }) {
  const Comp = asChild ? Slot : "button";

  const gradientStyles: React.CSSProperties = {};
  const resolvedVariant = variant || "default";

  if (resolvedVariant === "default") {
    gradientStyles.background =
      "radial-gradient(74.39% 91.27% at 128.92% 4.22%, #69499E 0%, #E9BCBD 100%)";
  } else if (resolvedVariant === "radial-gradient-white") {
    gradientStyles.background =
      "radial-gradient(49.76% 91.31% at 78.42% -8.16%, #69499E 0%, #FFF 100%)";
  }

  return (
    <Comp
      data-slot="button"
      className={cn(
        buttonVariants({ variant: resolvedVariant, size, className })
      )}
      style={{ ...gradientStyles, ...style }}
      {...props}
    />
  );
}

export { Button, buttonVariants };