export function Button({ children, onClick, disabled = false, variant = 'primary', className = '' }) {
  const variants = {
    primary: 'button-primary',
    secondary: 'button-secondary',
    outline: 'border border-primary-500 text-primary-500 hover:bg-primary-50',
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${variants[variant]} ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
    >
      {children}
    </button>
  );
}