import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

// Same posture as badge.tsx: the variants are a class helper first, so a <Link>
// can wear them without hydrating, and a <button> second.
//
// Hit sizes are the ones this app already uses. It is a bench somebody sits
// with for hours, so nothing here is smaller than what the existing controls
// are, and `sm` is the default because dense is the point.

export const buttonVariants = cva(
  "inline-flex items-center justify-center gap-1.5 rounded border transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:border-primary",
  {
    variants: {
      variant: {
        outline: "border-border text-muted-foreground hover:text-foreground hover:bg-accent",
        primary:
          "border-primary text-primary hover:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)]",
        destructive:
          "border-destructive text-destructive hover:bg-[color-mix(in_srgb,var(--color-destructive)_14%,transparent)]",
        ghost: "border-transparent text-muted-foreground hover:text-foreground hover:bg-accent",
      },
      size: {
        sm: "px-2 py-1 text-[11px]",
        md: "px-2.5 py-1 text-[12px]",
        lg: "px-3 py-1.5 text-[13px]",
      },
    },
    defaultVariants: { variant: "outline", size: "md" },
  },
);

export type ButtonVariants = VariantProps<typeof buttonVariants>;

export function Button({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<"button"> & ButtonVariants) {
  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />;
}