import React from 'react';
import { cn } from '../../lib/utils.ts';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'icon';
  size?: 'sm' | 'md' | 'lg';
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  className,
  children,
  ...props
}) => {
  const base = 'inline-flex items-center justify-center rounded-[var(--r)] font-medium transition-all duration-[var(--dur)] focus-visible:shadow-[var(--ring)] disabled:opacity-50 disabled:pointer-events-none';
  const variants: Record<string, string> = {
    primary: 'bg-[var(--brand-500)] text-[var(--ink-inverse)] hover:bg-[var(--brand-600)] active:bg-[var(--brand-700)]',
    secondary: 'bg-[var(--surface)] border border-[var(--border)] text-[var(--ink)] hover:bg-[var(--surface-2)]',
    ghost: 'bg-transparent text-[var(--ink)] hover:bg-[var(--surface-2)]',
    destructive: 'bg-[var(--danger)] text-white hover:opacity-90',
    icon: 'bg-transparent text-[var(--ink)] hover:bg-[var(--surface-2)] p-2',
  };
  const sizes: Record<string, string> = {
    sm: 'h-8 px-3 text-sm',
    md: 'h-10 px-5 text-base',
    lg: 'h-12 px-8 text-lg',
  };
  return (
    <button className={cn(base, variants[variant], sizes[size], className)} {...props}>
      {children}
    </button>
  );
};