import { useEffect } from "react";

import Footer from "@/components/Footer";
import Header from "@/components/Header";
import SeoHead from "@/components/SeoHead";
import { renderDivHTML } from "@/service/AdvancedFieldService";

type SinglePageProps = {
  page: {
    slug: string;
    title?: string | null;
    description?: string | null;
  };
  settings: any;
  products: any;
};

export default function SinglePage({ page, settings, products }: SinglePageProps) {
  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, []);

  return (
    <>
      <SeoHead
        seo={{
          title: page?.title ?? "",
          description: page?.description ?? "",
        }}
      />

      <div className="min-h-screen bg-white text-slate-900">
        <Header settings={settings} products={products} />

        <main className="mx-auto w-full max-w-5xl px-6 py-12 md:py-16">
          <article className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
            <h1 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
              {page?.title}
            </h1>

            <div className="mt-6 h-px w-full bg-slate-200" />

            <div className="prose prose-slate mt-6 max-w-none leading-8">
              {renderDivHTML(page?.description)}
            </div>
          </article>
        </main>

        <Footer settings={settings} />
      </div>
    </>
  );
}