SettingsPanel

'use client'
import { useState } from 'react'

function Toggle({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width: 40, height: 22, borderRadius: 11, border: 'none', cursor: 'pointer', position: 'relative',
      background: on ? '#C9A84C' : 'rgba(255,255,255,0.12)', transition: 'background 0.2s',
    }}>
      <span style={{ position: 'absolute', top: 2, left: on ? 20 : 2, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.3)' }} />
    </button>
  )
}

export default function SettingsPanel() {
  const [settings, setSettings] = useState({ notifications: true, publicProfile: false, analyticsShare: true, darkMode: true })
  const [plan, setPlan] = useState('pro')
  const [showKey, setShowKey] = useState(false)
  const [saved, setSaved] = useState(false)

  const apiKey = 'eu_sk_live_4xK9mP2qR8wL5vN1jT6c3bZ'

  function save() {
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  const set = (k: keyof typeof settings) => (v: boolean) => setSettings(s => ({ ...s, [k]: v }))

  return (
    <div style={{ background: '#0A0A0A', padding: 32, maxWidth: 480, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ color: '#F5F5F0', fontSize: 18, fontWeight: 700, marginBottom: 20 }}>Settings</div>

      {/* Notifications */}
      <Section title="Preferences">
        {[
          { key: 'notifications', label: 'Email notifications', sub: 'Receive updates about new components' },
          { key: 'publicProfile', label: 'Public profile', sub: 'Allow others to see your saved components' },
          { key: 'analyticsShare', label: 'Usage analytics', sub: 'Help us improve Empire UI (anonymous)' },
          { key: 'darkMode', label: 'Dark mode', sub: 'Force dark theme everywhere' },
        ].map(({ key, label, sub }) => (
          <div key={key} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
            <div>
              <div style={{ color: '#F5F5F0', fontSize: 14, marginBottom: 2 }}>{label}</div>
              <div style={{ color: 'rgba(255,255,255,0.35)', fontSize: 12 }}>{sub}</div>
            </div>
            <Toggle on={settings[key as keyof typeof settings]} onChange={set(key as keyof typeof settings)} />
          </div>
        ))}
      </Section>

      {/* Plan */}
      <Section title="Plan">
        <div style={{ display: 'flex', gap: 8 }}>
          {[{ id: 'free', label: 'Free', price: '$0' }, { id: 'pro', label: 'Pro', price: '$19/mo' }, { id: 'team', label: 'Team', price: '$49/mo' }].map(p => (
            <button key={p.id} onClick={() => setPlan(p.id)} style={{
              flex: 1, padding: '10px 8px', border: plan === p.id ? '1.5px solid #C9A84C' : '1px solid rgba(255,255,255,0.1)',
              borderRadius: 8, background: plan === p.id ? 'rgba(201,168,76,0.08)' : 'rgba(255,255,255,0.03)',
              color: plan === p.id ? '#C9A84C' : 'rgba(255,255,255,0.5)', cursor: 'pointer', fontSize: 12,
            }}>
              <div style={{ fontWeight: 700 }}>{p.label}</div>
              <div style={{ fontSize: 11 }}>{p.price}</div>
            </button>
          ))}
        </div>
      </Section>

      {/* API Key */}
      <Section title="API Key">
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ flex: 1, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 8, padding: '10px 12px', fontFamily: 'monospace', fontSize: 13, color: 'rgba(255,255,255,0.6)', letterSpacing: showKey ? 0 : 2 }}>
            {showKey ? apiKey : '•'.repeat(apiKey.length)}
          </div>
          <button onClick={() => setShowKey(s => !s)} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: '#F5F5F0', borderRadius: 8, padding: '10px 14px', cursor: 'pointer', fontSize: 13 }}>
            {showKey ? '🙈' : '👁'}
          </button>
        </div>
      </Section>

      <button onClick={save} style={{ marginTop: 16, background: saved ? '#22c55e' : '#C9A84C', color: '#0A0A0A', border: 'none', borderRadius: 8, padding: '12px', fontWeight: 700, cursor: 'pointer', fontSize: 14, transition: 'background 0.3s' }}>
        {saved ? '✓ Saved!' : 'Save changes'}
      </button>
    </div>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12, padding: 20, marginBottom: 12 }}>
      <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>{title}</div>
      {children}
    </div>
  )
}

Component info

About

Settings panel with toggle switches, radio groups, API key reveal, and save confirmation