"use client";

import { HumasLayout } from "@/components/layout/humas-layout";
import { getCustomStaticDetailBySlug } from "@/service/static-page-service";
import { Card } from "@nextui-org/react";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function StaticPage() {
  const params = useParams();
  const slug = params.slug;
  const [htmlBody, setHtmlBody] = useState("");

  useEffect(() => {
    initFetch();
  }, [slug]);

  const initFetch = async () => {
    const res = await getCustomStaticDetailBySlug(slug ? String(slug) : "");
    const data = res?.data?.data;
    setHtmlBody(data?.htmlBody);
  };

  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) return null;
  return (
    <HumasLayout>
      <Card className="rounded-md p-2 md:p-16">
        <div dangerouslySetInnerHTML={{ __html: htmlBody }} />
      </Card>
    </HumasLayout>
  );
}