import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { Link } from '@inertiajs/react';

export type PublicArticle = {
    title: string;
    slug: string;
    href: string;
    image: string;
    date: string;
    day: string;
    monthYear: string;
    tags: string[];
};

type UpdatesGridProps = {
    articles: PublicArticle[];
};

export function UpdatesGrid({ articles }: UpdatesGridProps) {
    return (
        <>
            <PageBreadcrumb page="updates" />

            <section className="blog-section pt-100 md-pt-80 pb-100 md-pb-80">
                <div className="container">
                    <div className="row">
                        {articles.map((article, index) => (
                            <div className="col-xl-4 col-lg-6 col-md-12" key={article.slug}>
                                <div className="blog-grid-item-1 wow fadeInUp" data-wow-delay={`.${index + 2}s`}>
                                    <div className="blog-grid-image">
                                        <Link href={article.href}>
                                            <figure className="image-anime">
                                                <img src={article.image} alt={article.title} />
                                            </figure>
                                        </Link>
                                    </div>
                                    <div className="blog-grid-content">
                                        <ul className="blog-meta">
                                            <li>
                                                <span>{article.date}</span>
                                            </li>
                                        </ul>
                                        <h2 className="blog-title underline">
                                            <Link href={article.href}>{article.title}</Link>
                                        </h2>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
}