import { Outlet, createFileRoute, useLocation } from '@tanstack/react-router'
import { LocalizedLayout } from '@/lib/localized-layout'
import { normalizeLocale } from '@/lib/seo'
import LocalizedHomePage from '@/views/localized/main/page'
import { NotFoundTitle } from '@/components/NotFoundTitle'

export const Route = createFileRoute('/$lang')({
  component: LangRoute,
  notFoundComponent: LangNotFound,
})

function LangRoute() {
  const { lang } = Route.useParams()

  return (
    <LocalizedLayout lang={normalizeLocale(lang)}>
      <Outlet />
    </LocalizedLayout>
  )
}

function LangNotFound() {
  const { lang } = Route.useParams()
  const pathname = useLocation({ select: (location) => location.pathname })

  if (pathname === `/${lang}`) {
    return <LocalizedHomePage />
  }

  return <NotFoundTitle />
}
