import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";

export interface BlogInterface {
	id: string,
	slug: string,
	title: string,
	content: string,
	label: string,
	author: string,
	published: string,
}

export interface BlogSummaryInterface extends BlogInterface {
	summary: string,
	image: string, 
	href: string
}

export const posts: BlogSummaryInterface[] = [
	{
		id: 'a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6',
		slug: 'tech-advancements-2025',
		title: 'Tech Advancements in 2025',
		content: 'The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.',
		label: 'Technology',
		author: 'd3f5e6g7-h8i9j0k1-l2m3n4o5p6q7',
		published: '2025-01-14',
		summary: 'A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.',
		image: 'https://via.placeholder.com/600x400?text=Tech+2025',
		href: 'history/tech-advancements-2025'
	},
	{
		id: 'f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3',
		slug: 'sustainable-fashion-2025',
		title: 'Sustainable Fashion in 2025',
		content: 'Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.',
		label: 'Fashion',
		author: 'w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7',
		published: '2025-01-12',
		summary: 'Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.',
		image: 'https://via.placeholder.com/600x400?text=Sustainable+Fashion',
		href: 'history/sustainable-fashion-2025'
	},
	{
		id: 'v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7',
		slug: 'mental-health-awareness-2025',
		title: 'Mental Health Awareness in 2025',
		content: 'As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.',
		label: 'Health',
		author: 'm8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3',
		published: '2025-01-10',
		summary: 'Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.',
		image: 'https://via.placeholder.com/600x400?text=Mental+Health+2025',
		href: '/history/mental-health-awareness-2025'
	}
];

const Blog = () => {
	return (
		<section className="self-center lg:md:py-24 sm:py-12">
			<div className="container flex flex-col items-center gap-16 lg:px-16">
				<div className="text-center">
					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
						En savoir plus sur ce sport
					</h2>
					<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig
						doloremque mollitia fugiat omnis! Porro facilis quo animi
						consequatur. Explicabo.
					</p>
					<Button variant="link" className="w-full sm:w-auto">
						Explore all posts
						<ArrowRight className="ml-2 size-4" />
					</Button>
				</div>
				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
					{posts.map((post) => (
						<a
							key={post.id}
							href={post.href}
							className="flex flex-col overflow-clip rounded-xl border border-border"
						>
							<div>
								<img
									src={post.image}
									alt={post.title}
									className="aspect-[16/9] h-full w-full object-cover object-center"
								/>
							</div>
							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
									{post.title}
								</h3>
								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
									{post.summary}
								</p>
								<p className="flex items-center hover:underline">
									Read more
									<ArrowRight className="ml-2 size-4" />
								</p>
							</div>
						</a>
					))}
				</div>
			</div>
		</section>
	);
};

export default Blog;