import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Blog } from "@/types/types";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { Badge } from "./ui/badge";

export function BlogCard({ blog }: { blog: Blog }) {
	return (
		<Card className="overflow-hidden border border-border rounded-xl">
			<Link href={`/blogs/${blog.slug}`} className="block">
				<img
					src={blog.image}
					alt={blog.title}
					className="aspect-[16/9] w-full object-cover object-center"
				/>
			</Link>
			<CardContent 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">
					{blog.title}
				</h3>
				<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
					{blog.summary}
				</p>
				<Link
					href={`/blogs/${blog.slug}`}
					className="flex items-center hover:underline"
				>
					En savoir plus
					<ArrowRight className="ml-2 size-4" />
				</Link>
			</CardContent>
			{blog.category && (
				<CardFooter>
					<Badge>{blog.category}</Badge>
				</CardFooter>
			)}
		</Card>
	);
}