/**
 * ConfirmDialog Component
 *
 * Modal confirmation dialog
 *
 * Props:
 * - message: string
 * - onConfirm: callback when confirmed
 * - onCancel: callback when cancelled
 * - confirmText: string (default: 'OK')
 * - cancelText: string (default: 'Abbrechen')
 * - type: 'warning' | 'danger' | 'info' (default: 'warning')
 */
export function ConfirmDialog({
  message,
  onConfirm,
  onCancel,
  confirmText = 'OK',
  cancelText = 'Abbrechen',
  type = 'warning'
}) {
  const colors = {
    warning: '#FFC107',
    danger: 'var(--danger)',
    info: 'var(--accent)'
  }

  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: 'rgba(0,0,0,0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 20000
      }}
      onClick={onCancel}
    >
      <div
        style={{
          background: 'var(--surface)',
          borderRadius: '12px',
          padding: '24px',
          maxWidth: '500px',
          width: '90%',
          boxShadow: '0 8px 24px rgba(0,0,0,0.3)'
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <div
          style={{
            fontSize: '16px',
            marginBottom: '24px',
            color: 'var(--text1)',
            lineHeight: '1.5'
          }}
        >
          {message}
        </div>

        <div
          style={{
            display: 'flex',
            gap: '12px',
            justifyContent: 'flex-end'
          }}
        >
          <button
            onClick={onCancel}
            style={{
              padding: '8px 16px',
              border: '1px solid var(--border)',
              borderRadius: '6px',
              background: 'var(--surface2)',
              color: 'var(--text1)',
              cursor: 'pointer',
              fontSize: '14px'
            }}
          >
            {cancelText}
          </button>
          <button
            onClick={onConfirm}
            style={{
              padding: '8px 16px',
              border: 'none',
              borderRadius: '6px',
              background: colors[type],
              color: type === 'warning' ? '#000' : 'white',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: 500
            }}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  )
}
