import type { ButtonHTMLAttributes, ReactNode } from 'react';

type Variant = 'primary' | 'ghost' | 'subtle' | 'danger';
type Size = 'sm' | 'md';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  children: ReactNode;
}

const BASE =
  'inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all whitespace-nowrap border border-transparent leading-none';

const VARIANTS: Record<Variant, string> = {
  primary: 'bg-[var(--brand)] text-[var(--brand-ink)] hover:bg-[var(--brand-deep)]',
  ghost:
    'bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)]',
  subtle:
    'text-[var(--ink-muted)] hover:text-[var(--ink)] hover:bg-[var(--bg-inset)] border-transparent',
  danger:
    'text-[var(--danger)] border-[var(--danger-soft)] bg-[var(--bg-elev)] hover:bg-[var(--danger-soft)]',
};

const SIZES: Record<Size, string> = {
  sm: 'text-[11px] px-2.5 py-1',
  md: 'text-[13px] px-3 py-[7px]',
};

export function Button({
  variant = 'ghost',
  size = 'md',
  className = '',
  children,
  ...rest
}: ButtonProps) {
  return (
    <button className={`${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`} {...rest}>
      {children}
    </button>
  );
}
