export default function SettingsModal({ theme, onTheme, onClearChats, onClose }) {
  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal-card" style={{ maxWidth: 500 }}>
        <div className="modal-header">
          <span className="modal-title">Settings</span>
          <button className="modal-close" onClick={onClose}>
            <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        
        <div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
          <div className="settings-row">
            <div>
              <div className="settings-row-label">Appearance</div>
              <div className="settings-row-sub">Switch between Light and Dark mode</div>
            </div>
            <div className="seg-ctrl">
              <button className={`seg-btn ${theme === 'dark' ? 'active' : ''}`} onClick={() => onTheme('dark')}>Dark</button>
              <button className={`seg-btn ${theme === 'light' ? 'active' : ''}`} onClick={() => onTheme('light')}>Light</button>
            </div>
          </div>

          <div className="settings-row">
            <div>
              <div className="settings-row-label">Chat History</div>
              <div className="settings-row-sub">Clear your current chat session</div>
            </div>
            <button className="btn btn-danger" onClick={() => { onClearChats(); onClose() }}>
              Clear Chat
            </button>
          </div>

          <div style={{ marginTop: 24, padding: 16, background: 'var(--s)', borderRadius: 12, textAlign: 'center', fontSize: 12, color: 'var(--t3)' }}>
            <div style={{ fontWeight: 600, color: 'var(--t2)', marginBottom: 2 }}>OwnGPT Web UI v2.0.4</div>
            <div>Powered by open-source models, crafted with React and FastAPI.</div>
          </div>
        </div>
      </div>
    </div>
  )
}