import React from 'react';

const ConfirmDialog = ({ 
  isOpen, 
  title = '확인', 
  message, 
  onConfirm, 
  onCancel,
  confirmText = '확인',
  cancelText = '취소',
  type = 'default' // 'default', 'danger', 'warning'
}) => {
  if (!isOpen) return null;

  const typeStyles = {
    default: {
      confirmBg: '#007bff',
      confirmHover: '#0056b3'
    },
    danger: {
      confirmBg: '#dc3545',
      confirmHover: '#c82333'
    },
    warning: {
      confirmBg: '#ffc107',
      confirmHover: '#e0a800'
    }
  };

  const style = typeStyles[type];

  const overlayStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10000
  };

  const dialogStyle = {
    backgroundColor: 'white',
    borderRadius: '8px',
    padding: '24px',
    minWidth: '400px',
    maxWidth: '500px',
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)'
  };

  const titleStyle = {
    fontSize: '18px',
    fontWeight: 'bold',
    marginBottom: '16px',
    color: '#333'
  };

  const messageStyle = {
    fontSize: '14px',
    lineHeight: '1.5',
    color: '#666',
    marginBottom: '24px'
  };

  const buttonContainerStyle = {
    display: 'flex',
    justifyContent: 'flex-end',
    gap: '12px'
  };

  const baseButtonStyle = {
    padding: '8px 16px',
    borderRadius: '4px',
    border: 'none',
    fontSize: '14px',
    cursor: 'pointer',
    transition: 'background-color 0.2s'
  };

  const cancelButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: '#6c757d',
    color: 'white'
  };

  const confirmButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: style.confirmBg,
    color: 'white'
  };

  return (
    <div style={overlayStyle} onClick={onCancel}>
      <div style={dialogStyle} onClick={(e) => e.stopPropagation()}>
        <h3 style={titleStyle}>{title}</h3>
        <p style={messageStyle}>{message}</p>
        <div style={buttonContainerStyle}>
          <button 
            style={cancelButtonStyle}
            onClick={onCancel}
            onMouseOver={(e) => e.target.style.backgroundColor = '#5a6268'}
            onMouseOut={(e) => e.target.style.backgroundColor = '#6c757d'}
          >
            {cancelText}
          </button>
          <button 
            style={confirmButtonStyle}
            onClick={onConfirm}
            onMouseOver={(e) => e.target.style.backgroundColor = style.confirmHover}
            onMouseOut={(e) => e.target.style.backgroundColor = style.confirmBg}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmDialog;
