pageBlogSlug

import Image from "next/image";
import Link from "next/link";

import { GoCard } from "@/components/go-card";
import {
	PageHeader,
	PageHeaderDescription,
	PageHeaderHeading,
} from "@/components/page-header";
import Markdown from "react-markdown";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import {
	fetchBlogBySlug,
	fetchCategories,
	fetchPaginationBlog,
	fetchPaginationBlogsByCategory,
	fetchPaginationTemplatesByCategory,
	fetchRelatedBlogByTags,
} from "@/lib/strapi/actions";
import { shuffle } from "lodash";

export async function generateMetadata(props: { params: { locale: string } }) {
	return {
		title: "Blog",
		description: "",
	};
}

const Blog = async ({
	searchParams,
	params,
}: {
	searchParams: { [key: string]: string | string[] | undefined };
}) => {
	// const filter = searchParams.filter ?? "ALL";
	const blog = await fetchBlogBySlug(params.slug);
	// console.log(JSON.stringify(blog?.attributes.tags));
	const tagIds = blog.attributes.tags.data.map((tag) => tag.id);
	// console.log(tagIds);
	const relatedBlogs = await fetchRelatedBlogByTags(tagIds);
	// console.log(relatedBlogs);

	const description = blog.attributes.content;

	return (
		<div className="container relative">
			<div className="flex flex-col xl:flex-row">
				<PageHeader className="w-full items-start">
					<nav className="mb-6 flex items-center gap-2 text-sm">
						<Link
							href="/"
							className={cn(
								"transition-colors hover:text-foreground/80 text-foreground/60"
							)}
						>
							Home
						</Link>
						<Separator className="mx-2 h-4" orientation="vertical" />
						<Link
							href="/blogs"
							className={cn(
								"transition-colors hover:text-foreground/80 text-foreground/60"
							)}
						>
							Blogs
						</Link>
						<Separator className="mx-2 h-4" orientation="vertical" />
						<span>{blog?.attributes.title}</span>
					</nav>
					<PageHeaderHeading className="max-w-4xl text-left">
						{/* Contact closed-won deals using round-robin tasks. */}
						{blog?.attributes?.title}
					</PageHeaderHeading>

					<Image
						src={blog?.attributes.thumbnail}
						alt="icon"
						width={500}
						height={100}
						className="mx-auto rounded-lg w-full"
					/>
					<div className="descriptionblock shrink-0 flex gap-20 ">
						<div className="markdownformat text-paragraph  break-normal">
							{/*max-w-4xl */}
							<Markdown>{description}</Markdown>
						</div>
					</div>
				</PageHeader>
			</div>
			<div className="mb-12 mt-20 text-center">
				<PageHeaderHeading className="mx-auto max-w-4xl">
					Related Blogs
				</PageHeaderHeading>
				<PageHeaderDescription className="mt-3">
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste
					repellendus ipsa, pariatur
				</PageHeaderDescription>
			</div>
			<div className="mb-12 grid grid-cols-2 gap-4 xl:grid-cols-4">
				{shuffle(relatedBlogs)
					.slice(0, 4)
					.map((blog) => (
						<GoCard
							key={blog.id}
							link={`/blogs/${blog.attributes.slug}`}
							title={blog.attributes.title}
							category={blog.attributes.tags as any as ResponseTags}
							icon={
								<Image
									src={blog.attributes.thumbnail}
									alt="icon"
									width={200}
									height={100}
									className="rounded-lg mx-auto w-full h-52 object-cover"
								/>
							}
						>
							{blog.attributes.content
								.replace(/[#`_*~>]/g, "")
								.replace(/<u>/g, "")
								.replace(/<\/u>/g, "")}
						</GoCard>
					))}{" "}
				{/* <GoCard	
		}
				<GoCard
					link="#"
					title="Add closed deals to MixMax with AI and Slack"
					icon={
						<Image
							src="/icon-salesforce.png"
							alt="icon"
							width={200}
							height={100}
							className="mx-auto rounded-lg"
						/>
					}
				>
					Elevate your sales strategy with this AI-powered triage template and
					seamlessly integrate with MixMax for timely engagement with won deals.
				</GoCard>
				{/* <GoCard
					link="#"
					title="Add closed deals to MixMax with AI and Slack"
					icon={
						<Image
							src="/icon-salesforce.png"
							alt="icon"
							width={200}
							height={100}
							className="mx-auto rounded-lg"
						/>
					}
				>
					Elevate your sales strategy with this AI-powered triage template and
					seamlessly integrate with MixMax for timely engagement with won deals.
				</GoCard>
				<GoCard
					link="#"
					title="Add closed deals to MixMax with AI and Slack"
					icon={
						<Image
							src="/icon-salesforce.png"
							alt="icon"
							width={200}
							height={100}
							className="mx-auto rounded-lg"
						/>
					}
				>
					Elevate your sales strategy with this AI-powered triage template and
					seamlessly integrate with MixMax for timely engagement with won deals.
				</GoCard>
				<GoCard
					link="#"
					title="Add closed deals to MixMax with AI and Slack"
					icon={
						<Image
							src="/icon-salesforce.png"
							alt="icon"
							width={200}
							height={100}
							className="mx-auto rounded-lg"
						/>
					}
				>
					Elevate your sales strategy with this AI-powered triage template and
					seamlessly integrate with MixMax for timely engagement with won deals.
				</GoCard> */}
			</div>
		</div>
	);
};

export default Blog;