import type { LocaleProps } from "@repo/i18n/config"
import { Link } from "@repo/ui/Design/Link"
import { Typography } from "@repo/ui/Design/Typography"
import { MainLayout } from "@repo/ui/Layout/MainLayout"
import { fromLocaleToWikipediaLocale, getWikipediaLink } from "@repo/wikipedia"
import { WikipediaClient } from "@repo/wikipedia-game-solver/WikipediaClient"
import { useTranslations } from "next-intl"
import { unstable_setRequestLocale } from "next-intl/server"
import Image from "next/image"

import WikipediaLogo from "#public/images/Wikipedia-Logo.webp"
import { Section } from "@repo/ui/Layout/Section"

interface HomePageProps extends LocaleProps {}

const HomePage: React.FC<HomePageProps> = (props) => {
  const { params } = props

  // Enable static rendering
  unstable_setRequestLocale(params.locale)

  const t = useTranslations()

  const localeWikipedia = fromLocaleToWikipediaLocale(params.locale)

  return (
    <MainLayout center>
      <Section horizontalSpacing>
        <Typography as="h1" variant="h1">
          {t("home.title")}
        </Typography>

        <Typography as="p" variant="text1" className="mt-3">
          {t.rich("home.description", {
            "wikipedia-link": (children) => {
              return (
                <Link href={getWikipediaLink(localeWikipedia)} target="_blank">
                  {children}
                </Link>
              )
            },
          })}
        </Typography>
      </Section>

      <section className="my-6 flex items-center justify-center">
        <Image src={WikipediaLogo} alt="Wikipedia" className="w-72" />
      </section>

      <WikipediaClient />
    </MainLayout>
  )
}

export default HomePage