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

function portfolioLightboxCaption(title: string, tag: string, detailHref: string): string {
    return `<h4 class='text-white'><a href='${detailHref}' class='text-primary text-white-hover'>${title}</a></h4><p>${tag}</p>`;
}

export function PortfolioMain({ hero, filters, items }: PortfolioPageProps) {
    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">
                    {filters.length > 0 && (
                        <div className="row">
                            <div className="filtering col-sm-12 text-center">
                                {filters.map((filter) => (
                                    <span
                                        key={filter.filter}
                                        className={filter.active ? 'active' : undefined}
                                        data-filter={filter.filter}
                                    >
                                        {filter.label}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}
                    <div className="row portfolio-gallery-isotope mt-n4">
                        {items.map((item) => {
                            const detailHref = marketingRoute('portfolio.show', { portfolio: item.slug });
                            const categoryLabel = item.tag || 'Portfolio';

                            return (
                                <div
                                    key={item.id}
                                    className={`col-sm-6 mt-4 items ${item.categoryClass}`}
                                    data-src={item.image}
                                    data-sub-html={portfolioLightboxCaption(item.title, categoryLabel, detailHref)}
                                >
                                    <div className="card card-style06 border-0 rounded">
                                        <img src={item.image} alt="" className="rounded" />
                                        <div className="card-body">
                                            <div className="portfolio-icon">
                                                <div className="top-icon">
                                                    <Link href={detailHref} className="portfolio-link">
                                                        <i className="fa fa-plus"></i>
                                                    </Link>
                                                </div>
                                            </div>
                                            <div className="portfolio-content">
                                                <span className="text-white">{categoryLabel}</span>
                                                <h2 className="h4">
                                                    <Link href={detailHref} className="text-white">
                                                        {item.title}
                                                    </Link>
                                                </h2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>
        </>
    );
}