"use client";

import { useParams } from "next/navigation";
import { MainHeader } from "@/components/layout/main-header";
import { MainFooter } from "@/components/shared/main-footer";
import { Card } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { SectionHeader } from "@/components/ui/section-header";
import { Skeleton } from "@/components/ui/skeleton";
import { usePageByKeyQuery } from "@/hooks/queries/api-hooks";
import { pickLocalizedText } from "@/lib/utils/i18n";
import { useLocale } from "@/providers/locale-provider";

export default function StaticPageByKey() {
  const params = useParams<{ key: string }>();
  const { locale } = useLocale();
  const isArabic = locale === "ar";
  const pageQuery = usePageByKeyQuery(params.key);

  return (
    <div>
      <MainHeader />
      <main className="container-shell section-space">
        {pageQuery.isLoading ? (
          <Skeleton className="h-52" />
        ) : pageQuery.data ? (
          <div className="space-y-4">
            <SectionHeader
              title={pickLocalizedText(pageQuery.data, "title_ar", "title_en", locale, params.key)}
              subtitle={isArabic ? "آخر نسخة من المحتوى الرسمي للمنصة" : "Latest official platform content"}
            />
            <Card>
              <article className="prose prose-slate max-w-none text-sm leading-8">
                {pickLocalizedText(
                  pageQuery.data,
                  "content_ar",
                  "content_en",
                  locale,
                  isArabic ? "لا يوجد محتوى متاح حاليًا." : "No content available right now.",
                )}
              </article>
            </Card>
          </div>
        ) : (
          <EmptyState title={isArabic ? "الصفحة غير متاحة" : "Page unavailable"} description={isArabic ? "تعذر العثور على المحتوى المطلوب." : "Unable to find requested content."} />
        )}
      </main>
      <MainFooter />
    </div>
  );
}