import type { ButtonHTMLAttributes, ReactNode } from 'react';
import { cn } from '../utils/cn.ts';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'ghost' | 'primary' | 'danger';
  size?: 'sm' | 'md';
  children: ReactNode;
}

export function Button({ variant = 'ghost', size = 'sm', className, children, ...props }: ButtonProps) {
  return (
    <button
      className={cn(
        'cursor-pointer rounded border transition-all duration-150 select-none whitespace-nowrap',
        size === 'sm' && 'px-1.5 py-0.5 text-[9px]',
        size === 'md' && 'px-2.5 py-1.5 text-xs rounded-lg',
        variant === 'ghost' &&
          'border-wing-border bg-transparent text-wing-muted hover:text-wing-text hover:border-wing-accent',
        variant === 'primary' &&
          'border-wing-accent bg-wing-accent text-white hover:brightness-110',
        variant === 'danger' &&
          'border-wing-danger bg-transparent text-wing-danger hover:bg-wing-danger/10',
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}
