import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

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

const settingsTabs = [
  { label: 'Health Check', to: '/settings/health' },
  { label: 'Projects', to: '/settings/projects' },
] as const

function SettingsLayout() {
  return (
    <div className="mx-auto max-w-4xl space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="font-display text-2xl font-semibold">Settings</h1>
      </div>
      <nav className="flex gap-1 border-b border-border">
        {settingsTabs.map((tab) => (
          <Link
            key={tab.to}
            to={tab.to}
            className="px-4 py-2 text-sm font-medium border-b-2 border-transparent text-muted-foreground transition-colors hover:text-foreground"
            activeProps={{
              className:
                'px-4 py-2 text-sm font-medium border-b-2 border-primary text-foreground',
            }}
          >
            {tab.label}
          </Link>
        ))}
      </nav>
      <Outlet />
    </div>
  )
}
