Button

import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "soft" | "clay" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
  leading?: ReactNode;
  trailing?: ReactNode;
  fullWidth?: boolean;
}

const VARIANTS = {
  primary: "bg-da-primary text-da-primary-fg hover:bg-da-primary/90",
  soft: "bg-da-accent text-da-accent-fg hover:brightness-95",
  clay: "bg-da-secondary text-da-secondary-fg hover:brightness-95",
  outline: "border border-da-fg/70 text-da-fg hover:bg-da-fg hover:text-da-bg",
  ghost: "text-da-fg hover:bg-da-surface-2",
} as const;
const SIZES = { sm: "h-9 gap-1.5 px-4 text-sm", md: "h-11 gap-2 px-5 text-[15px]", lg: "h-13 gap-2 px-7 text-base" } as const;

/** Soft pill button: sage primary, sage-tint soft, terracotta clay, outlined ink and ghost variants; three sizes, icons, gentle hover. */
export function Button({ variant = "primary", size = "md", leading, trailing, fullWidth, className, children, type = "button", ...rest }: ButtonProps) {
  return (
    <button
      type={type}
      className={cn(
        "da-focus da-transition inline-flex shrink-0 items-center justify-center rounded-da-pill font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
        VARIANTS[variant],
        SIZES[size],
        fullWidth && "w-full",
        className,
      )}
      {...rest}
    >
      {leading}
      {children}
      {trailing}
    </button>
  );
}

export default Button;