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

export function UpdatesDetailMain({ hero, post, navigation, sidebar }: UpdateDetailPageProps) {
    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>
                                    <Link href={marketingRoute('updates')}>Updates</Link>
                                </li>
                                <li>{hero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container">
                    <div className="row mt-n2-9">
                        <div className="col-lg-8 mt-2-9">
                            <div className="posts-wrapper">
                                <article className="card border-0 primary-shadow wow fadeInUp" data-wow-delay="200ms">
                                    <div className="image-hover">
                                        <img src={post.featuredImageUrl} alt={post.title} title={post.title} className="rounded-top" />
                                    </div>
                                    <div className="card-body p-1-6 p-sm-1-9">
                                        <ul className="list-unstyled mb-3 wow fadeInUp" data-wow-delay="200ms">
                                            <li className="d-inline-block me-3">
                                                <span className="display-31">
                                                    <i className="ti-calendar me-1 text-primary"></i> {post.date}
                                                </span>
                                            </li>
                                            {post.category ? (
                                                <li className="d-inline-block">
                                                    <span className="display-31">
                                                        <i className="ti-tag me-1 text-primary"></i> {post.category}
                                                    </span>
                                                </li>
                                            ) : null}
                                        </ul>
                                        <div>
                                            <h2 className="mb-3">{post.title}</h2>
                                            {post.contentHtml ? (
                                                <div
                                                    className="blog-detail-content"
                                                    dangerouslySetInnerHTML={{ __html: post.contentHtml }}
                                                />
                                            ) : null}
                                            {post.tags.length > 0 ? (
                                                <div className="row border-top border-color-light-black pt-4 pt-lg-5 mt-4 mt-lg-5 g-0">
                                                    <div className="col-md-12 wow fadeInUp" data-wow-delay="200ms">
                                                        <h3 className="h6 mb-3">Related Tags:</h3>
                                                        <div className="blog-tags mt-n2">
                                                            {post.tags.map((tag) => (
                                                                <a key={tag} href="#">
                                                                    {tag}
                                                                </a>
                                                            ))}
                                                        </div>
                                                    </div>
                                                </div>
                                            ) : null}
                                        </div>
                                    </div>
                                </article>

                                <div className="page-navigation mb-6 mt-2-9 wow fadeInUp" data-wow-delay="200ms">
                                    <div className="prev-page">
                                        <div className="page-info">
                                            {navigation.prev ? (
                                                <Link href={marketingRoute('updates.show', { update: navigation.prev.slug })}>
                                                    <span className="image-prev">
                                                        <img src={navigation.prev.imageUrl} alt={navigation.prev.title} title="" />
                                                    </span>
                                                    <div className="prev-link-page-info">
                                                        <h4 className="prev-title">{navigation.prev.title}</h4>
                                                        <span className="date-details">
                                                            <span className="create-date">{navigation.prev.date}</span>
                                                        </span>
                                                    </div>
                                                </Link>
                                            ) : null}
                                        </div>
                                    </div>
                                    <div className="next-page">
                                        <div className="page-info">
                                            {navigation.next ? (
                                                <Link href={marketingRoute('updates.show', { update: navigation.next.slug })}>
                                                    <div className="next-link-page-info">
                                                        <h4 className="next-title">{navigation.next.title}</h4>
                                                        <span className="date-details">
                                                            <span className="create-date">{navigation.next.date}</span>
                                                        </span>
                                                    </div>
                                                    <span className="image-next">
                                                        <img src={navigation.next.imageUrl} alt={navigation.next.title} title="" />
                                                    </span>
                                                </Link>
                                            ) : null}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {sidebar.recentPosts.length > 0 ? (
                            <div className="col-lg-4 mt-2-9">
                                <div className="sidebar ps-xl-5">
                                    <div className="widget bg-secondary mb-1-9 wow fadeInUp" data-wow-delay="100ms">
                                        <div className="widget-content">
                                            <h2 className="mb-4 h5 text-white">Recent Posts</h2>
                                            {sidebar.recentPosts.map((recentPost, index) => (
                                                <div
                                                    key={recentPost.id}
                                                    className={`d-flex${index < sidebar.recentPosts.length - 1 ? ' mb-4' : ''}`}
                                                >
                                                    <div className="flex-shrink-0">
                                                        <img src={recentPost.thumb} alt="" title="" />
                                                    </div>
                                                    <div className="flex-grow-1 ms-3">
                                                        <h3 className="mb-2 h6">
                                                            <Link
                                                                href={marketingRoute('updates.show', { update: recentPost.slug })}
                                                                className="text-white text-primary-hover"
                                                            >
                                                                {recentPost.title}
                                                            </Link>
                                                        </h3>
                                                        <span className="text-white opacity8 small">{recentPost.date}</span>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ) : null}
                    </div>
                </div>
            </section>
        </>
    );
}