import { createFileRoute } from '@tanstack/react-router'
import React, { useState } from 'react'
import { Tag } from '../primitives'
import { SubBar } from '../shell/SubBar'
import { SectionRail } from '../features/settings/SectionRail'
import { SavedSearchesSection } from '../features/settings/SavedSearchesSection'
import { DisplaySection } from '../features/settings/DisplaySection'
import '../styles/settings.css'

type SectionKey = 'saved-searches' | 'display'

const SECTIONS: { key: SectionKey; label: string }[] = [
  { key: 'saved-searches', label: 'Saved searches' },
  { key: 'display', label: 'Display' },
]

export const Route = createFileRoute('/settings')({
  component: SettingsRoute,
})

function SettingsRoute(): React.JSX.Element {
  const [active, setActive] = useState<SectionKey>('saved-searches')

  return (
    <>
      <SubBar>
        <Tag kind="neutral">settings</Tag>
      </SubBar>
      <div className="settings-shell">
        <SectionRail sections={SECTIONS} active={active} onSelect={setActive} />
        <div className="settings-panel">
          {active === 'saved-searches' && <SavedSearchesSection />}
          {active === 'display' && <DisplaySection />}
        </div>
      </div>
    </>
  )
}