import { getPublishedPageBySlugForLocale, listPosts } from "@cms/db"
import { Button } from "@cms/ui/button"
import { getTranslations } from "next-intl/server"
import { PublicAnnouncements } from "@/components/public-announcements"
import { PublicPageView } from "@/components/public-page-view"

export const dynamic = "force-dynamic"

type HomePageProps = {
  params: Promise<{ locale: string }>
}

export default async function HomePage({ params }: HomePageProps) {
  const { locale } = await params

  const [homePage, posts, t] = await Promise.all([
    getPublishedPageBySlugForLocale("home", locale),
    listPosts(),
    getTranslations("Home"),
  ])

  return (
    <section>
      {homePage ? <PublicPageView page={homePage} /> : null}
      <PublicAnnouncements placement="homepage" />

      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-6 pb-16">
        <header className="space-y-3">
          <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
          <h2 className="text-3xl font-semibold tracking-tight">{t("latestPosts")}</h2>
          <p className="text-neutral-600">{t("description")}</p>
        </header>

        <section className="space-y-4 rounded-xl border border-neutral-200 p-6">
          <div className="flex items-center justify-between">
            <h3 className="text-xl font-medium">{t("latestPosts")}</h3>
            <Button variant="secondary">{t("explore")}</Button>
          </div>

          <ul className="space-y-3">
            {posts.map((post) => (
              <li key={post.id} className="rounded-lg border border-neutral-200 p-4">
                <p className="text-xs uppercase tracking-wide text-neutral-500">{post.status}</p>
                <h4 className="mt-1 text-lg font-medium">{post.title}</h4>
                <p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? t("noExcerpt")}</p>
              </li>
            ))}
          </ul>
        </section>
      </section>
    </section>
  )
}