import React from 'react';

const LoadingSpinner = ({ 
  size = 'medium', 
  message = '로딩 중...', 
  fullScreen = false,
  color = '#007bff'
}) => {
  const sizeClasses = {
    small: 'w-4 h-4',
    medium: 'w-8 h-8',
    large: 'w-12 h-12'
  };

  const spinnerStyle = {
    border: `3px solid #f3f3f3`,
    borderTop: `3px solid ${color}`,
    borderRadius: '50%',
    animation: 'spin 1s linear infinite'
  };

  const containerStyle = fullScreen ? {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 9999
  } : {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '20px'
  };

  return (
    <>
      <style>
        {`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}
      </style>
      <div style={containerStyle}>
        <div 
          className={sizeClasses[size]}
          style={spinnerStyle}
        ></div>
        {message && (
          <p style={{ 
            marginTop: '10px', 
            color: '#666', 
            fontSize: '14px',
            textAlign: 'center'
          }}>
            {message}
          </p>
        )}
      </div>
    </>
  );
};

export default LoadingSpinner;
