import Image from "next/image";
import Link from "next/link";
import BlueArrow from "../../../../public/images/blue-arrow.svg";
import { RecentPost } from "@/types/blog-detail";

interface BlogDetailsRelatedProps {
    recent_posts: RecentPost[];
}

export default function BlogDetailsRelated({ recent_posts }: BlogDetailsRelatedProps) {
    if (!recent_posts?.length) return null;

    return (
        <section className="mb-16 md:mb-30">
            <div className="container">
                <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium text-center mb-8 md:mb-14">
                    Related posts
                </h2>

                <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-3 gap-x-5 gap-y-8 md:gap-y-16 xl:gap-y-20">
                    {recent_posts.map((post, index) => (
                        <div key={index} className="flex flex-col h-full">
                            <figure className="overflow-hidden rounded-[16px] w-full h-[220px] relative mb-5">
                                <Image
                                    className="rounded-[16px] transition-transform duration-500 hover:scale-105 object-cover"
                                    src={post.featured_image}
                                    alt={post.title}
                                    fill
                                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                                />
                            </figure>
                            <h6 className="text-[20px] text-[#00204F] font-bold tracking-normal leading-[1.3] mb-4 md:mb-6 line-clamp-2  transition-colors">
                                <Link href={`/blogs/${post.slug}`}>
                                    {post.title}
                                </Link>
                            </h6>
                            <Link href={`/blogs/${post.slug}`} className="flex items-center mt-auto group">
                                <span className="text-[15px] text-[#1718FF] font-bold mr-1 inline-block transition-all group-hover:mr-2">
                                    {post.button_text}
                                </span>
                                <Image
                                    src={BlueArrow}
                                    width={14}
                                    height={14}
                                    alt="blue-arrow"
                                    className="transition-transform group-hover:translate-x-1"
                                />
                            </Link>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}