// @ts-nocheck
import MainTemplate from "./MainTemplate"
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>
			<div className="container mx-auto p-4 grow">
				{!post ? (
					<div>Loading...</div>
				) : (
					<article className="prose prose-lg max-w-none">
						<header className="mb-6 pb-4">
							<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-1">
								{post?.title}
							</h1>
							<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
								<time datetime={convertDate(post?.date)} className="text-sm">
									{convertDate(post?.date)}
								</time>
								<div className="flex flex-wrap gap-3 align-center">
									{post?.tags?.map((tag, i) => (
										<Link
											className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
											key={i}
											to={`/tags/${tag}`}
										>
											{tag}
										</Link>
									))}
								</div>
							</div>
						</header>

						<div
							className="
							[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]!
							[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#fabd2f]
							[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fabd2f]
							[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
							[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
							[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground 
							[&>ul]:my-4 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2
							[&>pre]:mt-6 [&>pre]:mb-6
							[&>p+pre]:mt-6
							[&>pre+p]:mt-6
							[&>ul+pre]:mt-6 
							[&>li]:leading-[1.6] 
							[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-[#504945] [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal		
							[&>code]:relative [&>code]:rounded [&>code]:bg-[#504945] [&>code]:px-[0.3rem] [&>code]:py-[0.2rem] [&>code]:font-mono [&>code]:text-sm [&>code]:font-normal
						[&>figure]:w-full [&>figure]:max-w-2xl [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto [&>figure>img]:max-w-full [&>figure>img]:max-h-[700px] [&>figure>img]:w-auto [&>figure>img]:h-auto [&>figure>img]:object-contain
							[&>figure>img]:max-w-2xl [&>figure>img]:max-h-[700px] [&>figure>img]:w-auto [&>figure>img]:h-auto [&>figure>img]:object-contain
							[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-[#bdae93] [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
							[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
							[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[#689d6a] [&_a]:text-primary
							[&>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
								"
							dangerouslySetInnerHTML={{ __html: post?.html }}
						/>
					</article>
				)}
			</div>
		</MainTemplate>
	)
}

export default BlogTemplate
