'use client'

import { usePathname, useRouter } from 'next/navigation'
import { CONFIG_GROUPS } from '../admin/configNavigation'

export default function SettingsNavigation() {
  const pathname = usePathname()
  const router = useRouter()
  const current = CONFIG_GROUPS.flatMap((group) => group.items).find((item) => item.href === pathname)
  if (pathname === '/admin') return null
  return <nav className="settings-top-navigation" aria-label="Settings navigation">
    <a href="/admin">← All settings</a>
    <label><span>Jump to</span><select aria-label="Settings section" value={current?.href ?? '/admin'} onChange={(event) => router.push(event.target.value)}>
      <option value="/admin">Settings overview</option>
      {CONFIG_GROUPS.map((group) => <optgroup label={group.title} key={group.title}>{group.items.map((item) => <option key={item.href} value={item.href}>{item.label}</option>)}</optgroup>)}
    </select></label>
  </nav>
}