import { BadgeTabs, TabsContent } from '@/components/badge-tabs'

import { AppearanceSettingsTab } from './appearance-settings-tab'
import { ConnectionSettingsTab } from './connection-settings-tab'
import { SectionsSettingsTab } from './sections-settings-tab'
import { SessionSettingsTab } from './session-settings-tab'
import {
  SETTINGS_TAB_ITEMS,
  type SettingsTab,
} from './settings-tabs-data'

export function SettingsPageShell({
  activeTab,
  onTabChange,
  tokenRequired,
}: {
  activeTab: SettingsTab
  onTabChange: (tab: SettingsTab) => void
  tokenRequired: boolean
}) {
  return (
    <BadgeTabs
      value={activeTab}
      onValueChange={(value) => onTabChange(value as SettingsTab)}
      items={SETTINGS_TAB_ITEMS.map((tab) => ({
        value: tab.value,
        label: tab.label,
        icon: tab.icon,
      }))}
    >
      <TabsContent value="connection" className="mt-0">
        <ConnectionSettingsTab tokenRequired={tokenRequired} />
      </TabsContent>
      <TabsContent value="session" className="mt-0">
        <SessionSettingsTab />
      </TabsContent>
      <TabsContent value="appearance" className="mt-0">
        <AppearanceSettingsTab />
      </TabsContent>
      <TabsContent value="sections" className="mt-0">
        <SectionsSettingsTab />
      </TabsContent>
    </BadgeTabs>
  )
}