import LogoutButton from "@/app/logout-button";
import LanguageSwitcher from "@/app/language-switcher";
import ItemsResults from "@/app/items-results";
import { getItems } from "@/lib/items";
import { cookies } from "next/headers";
import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";

export const dynamic = "force-dynamic";


export default async function ItemsPage() {
  const { items, error } = await getItems();
  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);

  return (
    <main className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
        <div className="mx-auto max-w-7xl px-6 py-12">
          <h1 className="text-4xl font-bold tracking-tight">
            {t(locale, "articles.title")}
          </h1>

          <p className="mt-3 max-w-2xl text-sky-100">
            {t(locale, "articles.description")}
          </p>
          <div className="mt-6 flex flex-wrap items-center gap-3">
            <LogoutButton locale={locale} />
            <LanguageSwitcher locale={locale} label={t(locale, "language.label")} />
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-6 py-10">
        <ItemsResults initialItems={items} initialError={error} locale={locale} />
      </div>
    </main>
  );
}