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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium select-none border transition-[background-color,border-color,color,transform] duration-150 ease-out disabled:opacity-55 disabled:cursor-default active:not-disabled:scale-[0.96] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-[-1px]",
  {
    variants: {
      variant: {
        default:
          "bg-btn text-ink border-line shadow-[var(--shadow-small)] hover:bg-btn-hover active:bg-btn-active",
        primary:
          "bg-ok-emphasis text-on-accent border-line shadow-[var(--shadow-small)] hover:bg-primary-hover",
        ghost: "bg-transparent text-accent border-transparent hover:bg-neutral",
        danger:
          "bg-sunken text-error border-line shadow-[var(--shadow-small)] hover:bg-error-emphasis hover:text-on-accent hover:border-error-emphasis",
      },
      size: {
        sm: "text-[13px] px-3 py-0.5 rounded-md min-h-7",
        md: "text-sm px-4 py-[5px] rounded-md min-h-8 leading-5",
      },
    },
    defaultVariants: { variant: "default", size: "md" },
  },
);

export function Button({
  className,
  variant,
  size,
  asChild,
  type = "button",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "button";
  return (
    <Comp
      type={asChild ? undefined : type}
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  );
}