import type { PublicArticle } from '@frontend/components/sections/UpdatesGrid';
import { Link } from '@inertiajs/react';

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

export function HomeBlog({ articles }: HomeBlogProps) {
    if (articles.length === 0) {
        return null;
    }

    return (
        <>
            <section className="blog-section pb-100 md-pb-80">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="section-title-area">
                                <div className="section-title wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Blog &amp; Article</span>
                                    <h2>Update with our latest trends &amp; insights</h2>
                                </div>
                                <div className="section-title-content wow fadeInUp" data-wow-delay=".2s">
                                    <p className="mb-0">
                                        At our hotel, luxury is more than just a word it's a tradition. From exquisite design to personalized service, every detail is thoughtfully curated to create unforgettable experiences.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="swiper blog-slider">
                                <div className="swiper-wrapper">
                                    {articles.map((article) => (
                                        <div className="swiper-slide" key={article.slug}>
                                            <div className="blog-grid-item-2 wow fadeInUp" data-wow-delay=".3s">
                                                <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.day} </span>
                                                            {article.monthYear}
                                                        </li>
                                                    </ul>
                                                    <h3 className="blog-title underline">
                                                        <Link href={article.href}>{article.title}</Link>
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                <div className="swiper-actions text-center">
                                    <div className="dot"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}