import React, { memo } from 'react';

/**
 * Оптимизированная кнопка с мемоизацией
 * Предотвращает лишние ререндеры
 */
const OptimizedButton = memo(({ 
  onClick, 
  disabled = false, 
  loading = false,
  className = '', 
  children,
  type = 'button',
  variant = 'primary' // primary, secondary, ghost
}) => {
  // Определяем стили на основе варианта
  const baseStyles = 'font-semibold py-3 px-4 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
  
  const variantStyles = {
    primary: 'bg-[#48FF91] hover:bg-[#3de881] text-black',
    secondary: 'border border-[#48FF91] text-[#48FF91] hover:bg-[#48FF91]/10',
    ghost: 'text-[#48FF91] hover:bg-[#48FF91]/10'
  };
  
  const buttonClass = `${baseStyles} ${variantStyles[variant]} ${className}`;
  
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled || loading}
      className={buttonClass}
    >
      {loading ? (
        <span className="flex items-center justify-center gap-2">
          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
            <circle 
              className="opacity-25" 
              cx="12" 
              cy="12" 
              r="10" 
              stroke="currentColor" 
              strokeWidth="4"
              fill="none"
            />
            <path 
              className="opacity-75" 
              fill="currentColor" 
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
          Загрузка...
        </span>
      ) : children}
    </button>
  );
});

OptimizedButton.displayName = 'OptimizedButton';

export default OptimizedButton;
