Button

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

export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger" | "link";
export type ButtonSize = "sm" | "md" | "lg" | "icon";

interface BaseProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  /** Keyboard hint rendered at the end, e.g. "⌘↵". Decorative only. */
  shortcut?: string;
  loading?: boolean;
  className?: string;
  children?: ReactNode;
}

export type ButtonProps =
  | (BaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> & { href?: undefined })
  | (BaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps> & { href: string });

const VARIANTS: Record<ButtonVariant, string> = {
  primary: "bg-da-primary text-da-primary-fg hover:bg-da-primary/90 [box-shadow:inset_0_1px_0_rgb(255_255_255/0.12),var(--da-shadow-sm)]",
  secondary: "bg-da-fg text-da-bg hover:bg-da-fg/85",
  outline: "da-stroke bg-da-surface text-da-surface-fg shadow-da-sm hover:bg-da-muted",
  ghost: "text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg",
  danger: "bg-da-danger text-da-danger-fg shadow-da-sm hover:bg-da-danger/90",
  link: "h-auto px-0 text-da-fg underline-offset-4 hover:underline",
};

const SIZES: Record<ButtonSize, string> = {
  sm: "h-7 gap-1.5 rounded-da-sm px-2.5 text-[13px] [&_svg]:size-3.5",
  md: "h-9 gap-2 rounded-da-md px-3.5 text-sm [&_svg]:size-4",
  lg: "h-11 gap-2 rounded-da-md px-5 text-[15px] [&_svg]:size-4",
  icon: "size-9 rounded-da-md [&_svg]:size-4",
};

export function buttonClasses({ variant = "primary", size = "md", className }: { variant?: ButtonVariant; size?: ButtonSize; className?: string } = {}): string {
  return cn(
    "da-focus da-transition inline-flex shrink-0 cursor-pointer items-center justify-center font-medium whitespace-nowrap select-none active:scale-[0.98]",
    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
    SIZES[size],
    VARIANTS[variant],
    className,
  );
}

function Spinner() {
  return (
    <svg aria-hidden viewBox="0 0 16 16" fill="none" className="animate-spin motion-reduce:animate-none">
      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" />
      <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

export function Button(props: ButtonProps) {
  const { variant, size, leftIcon, rightIcon, shortcut, loading = false, className, children, ...rest } = props;
  const classes = buttonClasses({ variant, size, className });
  const content = (
    <>
      {loading ? <Spinner /> : leftIcon}
      {children}
      {rightIcon}
      {shortcut && (
        <kbd aria-hidden className="-mr-1 ml-0.5 rounded-[4px] bg-current/15 px-1 font-da-mono text-[10px] leading-4 opacity-80">
          {shortcut}
        </kbd>
      )}
    </>
  );

  if (rest.href !== undefined) {
    return (
      <a {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)} className={classes} aria-disabled={loading || undefined}>
        {content}
      </a>
    );
  }

  const { type = "button", disabled, ...buttonProps } = rest as ButtonHTMLAttributes<HTMLButtonElement>;
  return (
    <button {...buttonProps} type={type} disabled={disabled || loading} aria-busy={loading || undefined} className={classes}>
      {content}
    </button>
  );
}

export default Button;