import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "radix-ui";
import type { ComponentProps } from "react";
import { cn } from "./cn";

/** Flat buttons: quiet grey for most actions, one green primary per view, ghost for rows and bars, solid red for an urgent call or a removal. */
export const buttonVariants = cva(
  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 border-0 font-sans font-medium whitespace-nowrap transition-[background-color,color,box-shadow,transform] duration-150 select-none outline-none focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--color-brand)] active:translate-y-px disabled:pointer-events-none disabled:opacity-40 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        quiet: "bg-quiet text-[#27272a] hover:bg-quiet-hover",
        primary: "bg-action text-white hover:bg-action-hover",
        ghost: "bg-transparent text-body hover:bg-quiet hover:text-ink",
        outline: "bg-page text-ink shadow-[inset_0_0_0_1px_var(--color-line)] hover:bg-tile",
        danger: "bg-red-fill text-red-text hover:bg-[#fbdcdc]",
        red: "bg-red-icon text-white hover:bg-[#d02f32]",
        link: "h-auto bg-transparent p-0 text-ink underline decoration-line underline-offset-4 hover:decoration-ink",
      },
      size: {
        sm: "h-7 rounded-md px-2.5 text-[12.5px]",
        md: "h-[34px] rounded-lg px-3 text-[13.5px]",
        lg: "h-10 rounded-[10px] px-4 text-sm",
        icon: "size-[34px] rounded-lg p-0",
        "icon-sm": "size-7 rounded-md p-0",
      },
    },
    compoundVariants: [{ variant: "link", className: "h-auto px-0" }],
    defaultVariants: { variant: "quiet", size: "md" },
  },
);

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