import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "radix-ui";

import { cn } from "../lib/utils";

const buttonVariants = cva(
  "coline-button group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-white/20 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,transform,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] outline-none select-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:border-white/[0.06] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default:
          "bg-gradient-to-b from-blue-50 to-blue-100 text-blue-700 border-blue-200/50 hover:from-blue-100 hover:to-blue-150 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_1px_3px_0_rgba(0,0,0,0.1)] dark:from-blue-950/50 dark:to-blue-900/50 dark:text-blue-300 dark:border-blue-800/30 dark:hover:from-blue-900/60 dark:hover:to-blue-800/60 dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05),0_1px_3px_0_rgba(0,0,0,0.3)]",
        outline:
          "border-border/40 bg-background/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_2px_rgba(0,0,0,0.03)] hover:bg-background/80 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_3px_rgba(0,0,0,0.04)] hover:text-foreground active:shadow-[inset_0_2px_6px_rgba(0,0,0,0.06)] dark:bg-white/[0.04] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),inset_0_-1px_2px_rgba(0,0,0,0.2)] dark:hover:bg-white/[0.07] dark:hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_3px_rgba(0,0,0,0.25)] dark:active:shadow-[inset_0_2px_6px_rgba(0,0,0,0.35)] aria-expanded:bg-muted aria-expanded:text-foreground aria-expanded:shadow-[inset_0_2px_4px_rgba(0,0,0,0.06)]",
        secondary:
          "bg-secondary/70 text-secondary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_2px_rgba(0,0,0,0.04)] hover:bg-secondary/85 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.7),inset_0_-1px_3px_rgba(0,0,0,0.05)] active:shadow-[inset_0_2px_6px_rgba(0,0,0,0.07)] dark:bg-secondary/50 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),inset_0_-1px_2px_rgba(0,0,0,0.2)] dark:hover:bg-secondary/60 dark:hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_3px_rgba(0,0,0,0.25)] dark:active:shadow-[inset_0_2px_6px_rgba(0,0,0,0.35)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground aria-expanded:shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]",
        ghost:
          "hover:bg-muted/50 hover:text-foreground hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.4),inset_0_-1px_2px_rgba(0,0,0,0.03)] active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.06)] dark:hover:bg-white/[0.04] dark:hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.03),inset_0_-1px_2px_rgba(0,0,0,0.15)] dark:active:shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] aria-expanded:bg-muted aria-expanded:text-foreground",
        destructive:
          "bg-destructive/8 text-destructive shadow-[inset_0_1px_0_rgba(255,255,255,0.4),inset_0_-1px_2px_rgba(220,38,38,0.06)] hover:bg-destructive/12 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_3px_rgba(220,38,38,0.08)] active:shadow-[inset_0_2px_6px_rgba(220,38,38,0.12)] focus-visible:border-destructive/40 dark:bg-destructive/15 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.03),inset_0_-1px_2px_rgba(0,0,0,0.2)] dark:hover:bg-destructive/22 dark:hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.05),inset_0_-1px_3px_rgba(0,0,0,0.25)] dark:active:shadow-[inset_0_2px_6px_rgba(0,0,0,0.35)]",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
        icon: "size-9",
        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
        "icon-sm": "size-8",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

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

  return (
    <Comp
      ref={ref}
      {...(!asChild ? { type: type ?? "button" } : type ? { type } : {})}
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
});

export { Button, buttonVariants };