import { Blog } from "@/types/types";

export interface BlogItemParams {
	title_style: string;
	subtitle_style: string;
	p_style: string;
	default_img: string;
	blog: Blog;
}

export default function BlogItem({ params }: { params: BlogItemParams }) {
	const blog: Blog = params.blog
	return (
		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
			<section className="container self-center max-w-2xl">
				<div className="blog-title w-full h-28 justify-center">
					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
						{blog.slug}
					</h1>
				</div>
				<div className="content">
					{/* blog.content here will be transformed from markdown to actual code */}
					<div>
						<h2 className={params.subtitle_style}>Subtitle 1</h2>
						<p className={params.p_style}>
							Lorem ipsum dolor sit amet, consectetur adipisicing
							elit. Deleniti architecto incidunt, hic in
							consectetur eligendi nobis numquam tenetur sit
							repellat et unde, maxime ducimus autem esse
							temporibus omnis eum molestias!
						</p>
					</div>
					<div>
						<img
							src={params.default_img}
							alt={blog.slug}
							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
						/>
					</div>
					<div>
						<h2 className={params.subtitle_style}>Subtitle 2</h2>
						<p className={params.p_style}>
							Lorem ipsm dolor sit amet, consectetur adipisicing
							elit. Deleniti architecto incidunt, hic in
							consectetur eligendi nobis numquam tenetur sit
							repellat et unde, maxime ducimus autem esse
							temporibus omnis eum molestias!
						</p>
					</div>
					<div>
						<img
							src={params.default_img}
							alt={blog.slug}
							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
						/>
					</div>
					<div>
						<h2 className={params.subtitle_style}>Subtitle 3</h2>
						<p className={params.p_style}>
							Lorem ipsum dolor sit amet, consectetur adipisicing
							elit. Deleniti architecto incidunt, hic in
							consectetur eligendi nobis numquam tenetur sit
							repellat et unde, maxime ducimus autem esse
							temporibus omnis eum molestias!
						</p>
						<p className={params.p_style}>
							Lorem ipsum dolor sit amet, consectetur adipisicing
							elit. Deleniti architecto incidunt, hic in
							consectetur eligendi nobis numquam tenetur sit
							repellat et unde, maxime ducimus autem esse
							temporibus omnis eum molestias!
						</p>
					</div>
				</div>
			</section>
		</main>
	);
}