'use client'
import Layout from "@/components/layout/Layout"
import { recipesList } 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 = recipesList.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(${post?.bannerImage || '/assets/img/community/recipes/default-banner.webp'})`
						}}
					>
						<div className="container">
							<div className="row">
								<div className="col-lg-6 m-auto">
									<div className="heading1 text-center">
										<h1>{post?.title || "Recipes"}</h1>
										<div className="space20" />
										<Link href="/">
											Home <i className="fa-solid fa-angle-right" />{" "}
											<span>{post?.title || "Recipes"}</span>
										</Link>
									</div>
								</div>
							</div>
						</div>

					</div>

					{/*===== BLOG AREA STARTS =======*/}
					<div className="blog-details-section sp8">
						<div className="container">
							<div className="row">
								<div className="col-lg-12">
									<div className="blog-deatils-content heading2">
										<div className="img1">
											<img src={post?.bigImage} alt="recipe" />
										</div>
										<div className="space32" />
										<ul>
											<li>
												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post?.date} <span> | </span></Link>
											</li>
											<li>
												<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post?.user}<span> | </span></Link>
											</li>

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

										<div className="space32" />
										<div className="tags-social-area">
											<div className="tags">
												{mounted && <div dangerouslySetInnerHTML={{ __html: post?.tags || "" }} />}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/*===== BLOG AREA ENDS =======*/}
					{/*===== BLOG AREA STARTS =======*/}
					<div className="bloginner-section-area sp1">
						<div className="container">
							<div className="row">
								<div className="col-lg-5 m-auto">
									<div className="heading2 text-center space-margin60">
										<h2>Read More Recipes</h2>
									</div>
								</div>
							</div>
							<div className="row">
								{recipesList
									.filter(p => p.slug !== slug)
									.slice(0, 3)
									.map((relatedPost) => (
										<div key={relatedPost.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
											<div className="blog4-boxarea">
												<div className="img1">
													<img src={relatedPost.image} alt={relatedPost.title} />
												</div>
												<div className="content-area">
													<ul>
														<li>
															<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{relatedPost.date}<span> | </span></Link>
														</li>
														<li>
															<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{relatedPost.user}</Link>
														</li>
													</ul>
													<div className="space20" />
													<Link href={`/community/single-recipes?slug=${relatedPost?.slug}`}> {relatedPost.title.length > 40 ? `${relatedPost.title.slice(0, 40)}...` : relatedPost?.title}</Link>
													<div className="space24" />
													<Link href={`/community/single-recipes?slug=${relatedPost?.slug}`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
													<div className="arrow">
														<Link href={`/community/single-recipes?slug=${relatedPost?.slug}`}><i className="fa-solid fa-arrow-right" /></Link>
													</div>
												</div>
											</div>
										</div>
									))}
								{/* <div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
									<div className="blog4-boxarea">
										<div className="img1">
											<img src="/assets/img/all-images/memory/memory-img8.png" alt="" />
										</div>
										<div className="content-area">
											<ul>
												<li>
													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
												</li>
												<li>
													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle</Link>
												</li>
											</ul>
											<div className="space20" />
											<Link href="/single-recipes">Where Vision Meetup Connect: Eventify 2024</Link>
											<div className="space24" />
											<Link href="/single-recipes" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
											<div className="arrow">
												<Link href="/single-recipes"><i className="fa-solid fa-arrow-right" /></Link>
											</div>
										</div>
									</div>
								</div>
								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
									<div className="blog4-boxarea">
										<div className="img1">
											<img src="/assets/img/all-images/memory/memory-img9.png" alt="" />
										</div>
										<div className="content-area">
											<ul>
												<li>
													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
												</li>
												<li>
													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Mertie</Link>
												</li>
											</ul>
											<div className="space20" />
											<Link href="/single-recipes">Fuel Your Business Growth at Eventify</Link>
											<div className="space24" />
											<Link href="/single-recipes" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
											<div className="arrow">
												<Link href="/single-recipes"><i className="fa-solid fa-arrow-right" /></Link>
											</div>
										</div>
									</div>
								</div> */}
							</div>
						</div>
					</div>
					{/*===== Recipe AREA ENDS =======*/}

				</div>
		</>
	)
}

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

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

export default RecipePage;