import React from 'react';

interface StandardButtonProps {
  onClick: () => void;
  children: React.ReactNode;
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  className?: string;
}

const StandardButton: React.FC<StandardButtonProps> = ({
  onClick,
  children,
  variant = 'primary',
  disabled = false,
  className = '',
  size = 'medium'
}) => {
  const sizeClasses = {
    small: 'h-8 px-3 text-xs',
    medium: 'h-10 px-4 sm:px-6 text-sm',
    large: 'h-12 px-6 sm:px-8 text-base'
  } as const;

  const baseClasses =
    `rounded-md font-medium transition-colors duration-200 flex items-center gap-2 whitespace-nowrap ${sizeClasses[size]}`;

  const variantClasses = {
    primary:
      'bg-gray-900 text-white hover:bg-gray-800 focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 active:bg-gray-950',
    secondary:
      'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 active:bg-gray-400'
  } as const;

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

export default StandardButton;