import React from 'react';

const ErrorMessage = ({ 
  error, 
  onRetry = null, 
  onDismiss = null,
  type = 'error' // 'error', 'warning', 'info'
}) => {
  const typeStyles = {
    error: {
      backgroundColor: '#fee',
      borderColor: '#fcc',
      color: '#c33',
      icon: '❌'
    },
    warning: {
      backgroundColor: '#fff3cd',
      borderColor: '#ffeaa7',
      color: '#856404',
      icon: '⚠️'
    },
    info: {
      backgroundColor: '#d1ecf1',
      borderColor: '#bee5eb',
      color: '#0c5460',
      icon: 'ℹ️'
    }
  };

  const style = typeStyles[type];

  const containerStyle = {
    backgroundColor: style.backgroundColor,
    border: `1px solid ${style.borderColor}`,
    borderRadius: '4px',
    padding: '12px 16px',
    margin: '10px 0',
    display: 'flex',
    alignItems: 'flex-start',
    gap: '10px'
  };

  const messageStyle = {
    color: style.color,
    fontSize: '14px',
    lineHeight: '1.4',
    flex: 1
  };

  const buttonStyle = {
    backgroundColor: style.color,
    color: 'white',
    border: 'none',
    borderRadius: '3px',
    padding: '4px 8px',
    fontSize: '12px',
    cursor: 'pointer',
    marginLeft: '8px'
  };

  const getErrorMessage = (error) => {
    if (typeof error === 'string') return error;
    if (error?.message) return error.message;
    if (error?.detail) return error.detail;
    if (error?.response?.data?.detail) return error.response.data.detail;
    if (error?.response?.data?.message) return error.response.data.message;
    return '알 수 없는 오류가 발생했습니다.';
  };

  return (
    <div style={containerStyle}>
      <span style={{ fontSize: '16px' }}>{style.icon}</span>
      <div style={{ flex: 1 }}>
        <div style={messageStyle}>
          {getErrorMessage(error)}
        </div>
        <div style={{ marginTop: '8px' }}>
          {onRetry && (
            <button 
              onClick={onRetry}
              style={buttonStyle}
              onMouseOver={(e) => e.target.style.opacity = '0.8'}
              onMouseOut={(e) => e.target.style.opacity = '1'}
            >
              다시 시도
            </button>
          )}
          {onDismiss && (
            <button 
              onClick={onDismiss}
              style={{
                ...buttonStyle,
                backgroundColor: 'transparent',
                color: style.color,
                border: `1px solid ${style.color}`
              }}
              onMouseOver={(e) => {
                e.target.style.backgroundColor = style.color;
                e.target.style.color = 'white';
              }}
              onMouseOut={(e) => {
                e.target.style.backgroundColor = 'transparent';
                e.target.style.color = style.color;
              }}
            >
              닫기
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default ErrorMessage;
