'use client'
import Layout from "@/components/layout/Layout"
import { heritageLanguage } from "@/utility/constant.utils";
import PageLoader from "@/components/common-component/PageLoader";
import Link from "next/link"
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from "react";
import { Suspense } from "react";

const Page = () => {
	// const { slug } = params;
	const searchParams = useSearchParams();
	const slug = searchParams.get('slug');
	console.log("slug", slug)
	const post = heritageLanguage.find((post) => post.slug === slug);
	const [mounted, setMounted] = useState(false);

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

	if (!post) {
		return <p>post not found!</p>;
	}

	return (
		<>


			<div>
				<div className="inner-page-header" style={{ backgroundImage: 'url(../../assets/img/bg/header-bg13.png)' }}>
					<div className="container">
						<div className="row">
							<div className="col-lg-12 m-auto">
								<div className="heading1">
									<h1>{post?.title}</h1>
									<div className="space20" />
									<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>{post?.title}</span></Link>
								</div>
							</div>
						</div>
					</div>
				</div>

				{/*===== BLOG AREA STARTS =======*/}
				<div className="blog-details-section sp1">
					<div className="container">
						<div className="row">
							<div className="col-lg-12">
								<div className="blog-deatils-content heading2">
									<div className="img1">
										<img src={post?.image} alt="Heritage and Language" />
									</div>
									<div className="space32" />

									{mounted && <div dangerouslySetInnerHTML={{ __html: post?.description || "" }} />}



								</div>
							</div>
						</div>
					</div>
				</div>
				{/*===== BLOG AREA ENDS =======*/}


			</div>

		</>
	)
}

const HeritageLanguage = (() => {
	return (
		<Layout headerStyle={1} footerStyle={1}>

			<Suspense fallback={<PageLoader />}>
				<Page />
			</Suspense>
		</Layout>
	)
})

export default HeritageLanguage;