// @ts-nocheck
import MainTemplate from "./MainTemplate"
import { Badge } from "@/components/ui/badge"
import { Link, useParams } from "react-router"
import { convertDate } from "@/utils/convertDate"
import { usePosts } from "@/hooks/usePosts"

const BlogTemplate = () => {
	const { slug } = useParams()
	const { posts } = usePosts()
	const post = posts?.find((x) => x.slug === slug)

	return (
		<MainTemplate>
			{!post ? (
				<div>Loading...</div>
			) : (
				<>
					<div className="mb-5">
						<h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
							{post?.title}
						</h2>
					</div>
					<div className="flex md:flex-row md:justify-between flex-col mb-8">
						<span className="text-muted-foreground">
							{convertDate(post?.date)}
						</span>
						<div className="flex gap-1 mt-3 md:mt-0">
							{post?.tags?.map((tag, i) => (
								<Badge asChild variant="secondary">
									<Link key={i} to={`/tags/${tag}`}>
										{tag}
									</Link>
								</Badge>
							))}
						</div>
					</div>
					<div
						className="
							[&>h2]:text-xl [&>h2]:border-b [&>h2]:pb-2  [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
							[&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5
							[&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold  [&>h4:not(:first-child)]:mt-4
							[&>p]:leading-7 [&>p:not(:first-child)]:mt-6
							[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
							[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground [&>blockquote]:text-sm
							[&>ul]:my-4 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2
							[&>table]:w-full [&>table]:my-4
							[&>table>thead>tr]:m-0 [&>table>thead>tr]:border-t [&>table>thead>tr]:p-0 [&>table>thead>tr:even]:bg-muted
							[&>table>thead>tr>th]:border [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-2 [&>table>thead>tr>th]:text-left [&>table>thead>tr>th]:font-bold [&>table>thead>tr>th[align=center]]:text-center [&>table>thead>tr>th[align=right]]:text-right
							[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
							[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
							[&>code]:relative [&>code]:rounded [&>code]:bg-muted [&>code]:px-[0.3rem] [&>code]:py-[0.2rem] [&>code]:font-mono [&>code]:text-sm [&>code]:font-normal
							[&>table>tbody>tr:nth-child(even)]:bg-muted
							[&>table>thead>tr:nth-child(even)]:bg-muted
							[&_table_code]:text-sm font-normal
							[&>pre]:mt-6 [&>pre]:mb-6
							[&>p+pre]:mt-6
							[&>pre+p]:mt-6
							[&>ul+pre]:mt-6 
							[&>li]:leading-[1.5] 
							[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal		
							[&>p]:mt-6 [&>p]:leading-[1.5]
							[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground		
							[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
							[&>figure>img]:w-full
							[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
							[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
												"
						dangerouslySetInnerHTML={{ __html: post?.html }}
					/>
				</>
			)}
		</MainTemplate>
	)
}

export default BlogTemplate