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

export type PublicArticleDetail = PublicArticle & {
    content: string;
    previous: { title: string; href: string } | null;
    next: { title: string; href: string } | null;
    recent: { title: string; href: string; image: string; date: string }[];
};

type UpdatesDetailsProps = {
    article: PublicArticleDetail;
};

export function UpdatesDetails({ article }: UpdatesDetailsProps) {
    return (
        <>
            <PageBreadcrumb page="update-detail" title={article.title} parentPage="updates" parentHref="/updates" />

            <section className="blog-single-section pt-100 md-pt-80 pb-100 md-pb-80">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-8">
                            <div className="blog-single-post">
                                <div className="blog-block-one">
                                    <div className="blog-single-media">
                                        <figure className="image-anime">
                                            <img src={article.image} alt={article.title} />
                                        </figure>
                                    </div>
                                    <div className="blog-single-contain">
                                        <div className="blog-entry-content">
                                            <ul className="blog-single-meta">
                                                <li>
                                                    <i className="fa-solid fa-calendar-days"></i>
                                                    <span>{article.date}</span>
                                                </li>
                                            </ul>
                                            <h2 className="line-anime">{article.title}</h2>
                                            <div dangerouslySetInnerHTML={{ __html: article.content }} />
                                        </div>
                                        {article.tags.length > 0 ? (
                                            <div className="share-links">
                                                <div className="share-tag">
                                                    <span className="share-links-title">Related Tags</span>
                                                    <ul className="tagcloud">
                                                        {article.tags.map((tag) => (
                                                            <li key={tag}>
                                                                <span>{tag}</span>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            </div>
                                        ) : null}
                                    </div>
                                </div>
                                {article.previous || article.next ? (
                                    <nav className="navigation post-navigation" aria-label="Posts">
                                        <div className="row nav-links">
                                            <div className="col-md-6">
                                                {article.previous ? (
                                                    <div className="nav-previous">
                                                        <Link href={article.previous.href} rel="prev">
                                                            <span className="post-nav-icon">
                                                                <i className="fa-solid fa-chevron-left"></i>
                                                                <span className="post-nav-head">Previous Post</span>
                                                            </span>
                                                            {article.previous.title}
                                                        </Link>
                                                    </div>
                                                ) : null}
                                            </div>
                                            <div className="col-md-6">
                                                {article.next ? (
                                                    <div className="nav-next">
                                                        <Link href={article.next.href} rel="next">
                                                            <span className="post-nav-icon">
                                                                <span className="post-nav-head">Next Post</span>
                                                                <i className="fa-solid fa-chevron-right"></i>
                                                            </span>
                                                            {article.next.title}
                                                        </Link>
                                                    </div>
                                                ) : null}
                                            </div>
                                        </div>
                                    </nav>
                                ) : null}
                            </div>
                        </div>
                        <div className="col-lg-4">
                            <div className="widget-sidebar">
                                <div className="widget widget-recent-post">
                                    <div className="widget-title">
                                        <h3 className="line-anime">Recent Post</h3>
                                    </div>
                                    <div className="widget-content">
                                        {article.recent.map((item) => (
                                            <div className="recent-post-item d-flex" key={item.href}>
                                                <div className="recent-post-image flex-shrink-0">
                                                    <figure className="image-anime">
                                                        <img src={item.image} alt={item.title} />
                                                    </figure>
                                                </div>
                                                <div className="recent-post-content flex-grow-1 ms-3">
                                                    <h4 className="underline">
                                                        <Link href={item.href}>{item.title}</Link>
                                                    </h4>
                                                    <p className="post-date">
                                                        <i className="fa-solid fa-calendar-days"></i>
                                                        {item.date}
                                                    </p>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}