import type { LocaleProps } from "@repo/i18n/config"
import { Button } from "@repo/ui/design/Button"
import { Link } from "@repo/ui/design/Link"
import { Typography } from "@repo/ui/design/Typography"
import { MainLayout } from "@repo/ui/MainLayout"
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 { FaRocket } from "react-icons/fa6"

import WikipediaLogo from "#public/images/Wikipedia-Logo.png"

interface HomePageProps extends LocaleProps {}

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

  // Enable static rendering
  unstable_setRequestLocale(params.locale)

  const t = useTranslations()

  return (
    <MainLayout>
      <section className="text-center">
        <Typography as="h1" variant="h1">
          {t("home.title")}
        </Typography>

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

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

      <section className="my-6 flex items-center space-x-6">
        <Button leftIcon={<FaRocket size={18} />} href="/about">
          About
        </Button>

        <Button
          leftIcon={<FaRocket size={18} />}
          variant="outline"
          href="/"
          target="_blank"
        >
          Get Started
        </Button>
      </section>

      <WikipediaClient />
    </MainLayout>
  )
}

export default HomePage