import './Button.css';
import type { ButtonHTMLAttributes, ReactNode } from 'react';

type ButtonVariant = 'primary' | 'ghost' | 'toggle' | 'outline';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  children: ReactNode;
  className?: string;
  fontSize?: number;
}

export default function Button({
  variant = 'primary',
  children,
  className = '',
  disabled,
  fontSize = 13,
  type = 'button',
  style,
  ...props
}: ButtonProps) {
  return (
    <button
      type={type}
      className={`btn btn-${variant} ${className}`}
      disabled={disabled}
      style={{
        fontSize: `${fontSize}px`,
        ...style,
      }}
      {...props}
    >
      {children}
    </button>
  );
}