import { isLocale, type Locale, publicPath } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";
import { getDb } from "@/lib/db";
import { seedIfEmpty } from "@/lib/seed";
import { listProjects } from "@/lib/models";
import { ProjectFilter } from "@/components/project-filter";
import { buildMetadata } from "@/lib/metadata";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const locale: Locale = isLocale(lang) ? lang : "de";
  return buildMetadata(locale, getDict(locale).projects.title, getDict(locale).projects.lede, { path: publicPath(locale, "projects") });
}

export default async function ProjectsPage({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const locale: Locale = isLocale(lang) ? lang : "de";
  const db = getDb();
  seedIfEmpty(db);
  const projects = listProjects(db, locale);
  const dict = getDict(locale);
  return (
    <div className="mx-auto max-w-[var(--max-w)] px-4 py-12 md:px-6">
      <div className="section-heading">
        <span className="section-heading__label">~/projects</span>
        <h1 className="section-heading__title">{dict.projects.title}</h1>
      </div>
      <p className="mb-6 max-w-2xl text-[var(--fg-dim)]">{dict.projects.lede}</p>
      <ProjectFilter projects={projects} locale={locale} emptyLabel={dict.projects.emptyState} />
    </div>
  );
}
