import { marketingRoute } from '@frontend/lib/marketing-route';
import type { UpdatesPageProps } from '@frontend/types/pages/updates';
import { Link } from '@inertiajs/react';

export function UpdatesMain({ hero, items }: UpdatesPageProps) {
    return (
        <>
            <section
                className="page-title-section top-position1 bg-img cover-background secondary-overlay"
                data-overlay-dark="8"
                data-background={hero.backgroundData}
            >
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h1>{hero.heading}</h1>
                            <ul>
                                <li>
                                    <Link href={marketingRoute('home')}>Home</Link>
                                </li>
                                <li>{hero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container">
                    <div className="row g-xxl-5 mt-n2-9">
                        {items.map((post) => (
                            <div key={post.id} className="col-md-6 mt-2-9 wow fadeInUp" data-wow-delay={post.wowDelay}>
                                <article className="card card-style02">
                                    <div className="image-hover">
                                        <Link href={marketingRoute('updates.show', { update: post.slug })}>
                                            <img src={post.image} alt="" title="" className="rounded mb-1-6" />
                                        </Link>
                                    </div>
                                    <div className="card-body">
                                        <div className="d-flex align-items-center mb-3 card-text flex-wrap">
                                            <div className="card-img-text">
                                                <Link href="#" prefetch={false}>
                                                    {post.category}
                                                </Link>
                                            </div>
                                            <div className="card-line">
                                                <span className="d-block small font-weight-600 text-uppercase ps-2-9">{post.date}</span>
                                            </div>
                                        </div>
                                        <h2 className="mb-0 h4">
                                            <Link href={marketingRoute('updates.show', { update: post.slug })}>{post.title}</Link>
                                        </h2>
                                    </div>
                                </article>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
}