import React from 'react'

type Props = {
  isOpen: boolean
  onClose: () => void
  skipIntro: boolean
  onSkipIntroChange: (skip: boolean) => void
}

export const ConfigModal: React.FC<Props> = ({ isOpen, onClose, skipIntro, onSkipIntroChange }) => {
  if (!isOpen) return null

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="config-modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Configuration</h2>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>
        
        <div className="modal-content">
          <div className="config-option">
            <label className="config-label">
              <input
                type="checkbox"
                checked={skipIntro}
                onChange={e => onSkipIntroChange(e.target.checked)}
                className="config-checkbox"
              />
              <span className="config-text">Skip Intro</span>
            </label>
            <div className="config-description">
              Skip the loading screen animation on startup
            </div>
          </div>
        </div>
        
        <div className="modal-footer">
          <button className="modal-btn" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  )
}