import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/shared/utils/utils"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-sans text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-[#4338CA] text-white hover:bg-[#3730A3] active:bg-[#312E81] shadow-xs",
        outline:
          "border border-[#D1D5DB] bg-white text-[#374151] hover:bg-[#F9FAFB] hover:text-[#111827] shadow-xs",
        secondary:
          "bg-[#F3F4F6] text-[#374151] hover:bg-[#E5E7EB] hover:text-[#111827]",
        ghost:
          "hover:bg-[#F3F4F6] text-[#4B5563] hover:text-[#111827]",
        destructive:
          "bg-rose-600 text-white hover:bg-rose-700 active:bg-rose-800 shadow-xs",
        link: "text-[#4338CA] underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-9 min-h-[36px] px-4 py-[7.5px] gap-2 rounded-lg text-sm",
        xs: "h-7 min-h-[28px] px-2.5 py-1 gap-1.5 rounded-md text-xs",
        sm: "h-8 min-h-[32px] px-3 py-1.5 gap-1.5 rounded-md text-xs",
        lg: "h-10 min-h-[40px] px-5 py-2 gap-2 rounded-lg text-base",
        icon: "size-9 rounded-lg",
        "icon-xs": "size-6 rounded-md",
        "icon-sm": "size-7 rounded-md",
        "icon-lg": "size-10 rounded-lg",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  ...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
  return (
    <ButtonPrimitive
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }