import type { ButtonHTMLAttributes, ReactNode } from 'react';
import { Link, type LinkProps } from 'react-router';
import styles from './Button.module.css';

export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text' | 'danger';
export type ButtonSize = 'small' | 'medium';

interface Common {
  variant?: ButtonVariant;
  size?: ButtonSize;
  /** Leading icon, usually an <Icon size={20} />. */
  icon?: ReactNode;
}

export function buttonClassName(variant: ButtonVariant = 'filled', size: ButtonSize = 'small', extra?: string): string {
  return [styles.button, styles[variant], styles[size], extra].filter(Boolean).join(' ');
}

/** design-spec §3.1 buttons: full radius, small 40 px or medium 56 px, label-large; 48 px target on touch screens. */
export function Button({
  variant,
  size,
  icon,
  className,
  children,
  type = 'button',
  ...rest
}: Common & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button type={type} className={buttonClassName(variant, size, className)} {...rest}>
      {icon}
      {children}
    </button>
  );
}

/** A link that looks like a Button (navigation, not an action). */
export function ButtonLink({ variant, size, icon, className, children, ...rest }: Common & LinkProps) {
  return (
    <Link className={buttonClassName(variant, size, className)} {...rest}>
      {icon}
      {children}
    </Link>
  );
}