import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { WorkListClient } from "@/components/work/WorkListClient";
import { getAllProjects } from "@/lib/db/projects";

interface Props {
  params: Promise<{ locale: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "work" });
  return { title: t("title"), description: t("subtitle") };
}

export const dynamic = "force-dynamic";

export default async function WorkPage({ params }: Props) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "work" });
  const projects = await getAllProjects(locale);

  return (
    <div className="relative z-10 mx-auto max-w-6xl px-6 py-24 pt-32">
      <SectionHeader label="work" />
      <div className="mb-12">
        <h1 className="text-4xl font-bold text-text-primary md:text-5xl">{t("title")}</h1>
        <p className="mt-4 max-w-2xl text-text-secondary">{t("subtitle")}</p>
      </div>
      <WorkListClient projects={projects} />
    </div>
  );
}
