'use client'
import Layout from "@/components/layout/Layout"
import { tamilCulturePost } 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 = tamilCulturePost.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-6 m-auto">
									<div className="heading1 text-center">
										<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="Tamil culture" />
										</div>
										<div className="space32" />
			
										{mounted && <div dangerouslySetInnerHTML={{ __html: post?.description || "" }} />}

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

				</div>
		
		</>
	)
}

const TamilCulturePost = (() => {
    return (
       <Layout headerStyle={1} footerStyle={1}>
            
            <Suspense fallback={<PageLoader />}>
                <Page />
            </Suspense>
        </Layout>
    )
})

export default TamilCulturePost;