import { useSiteChrome } from '@frontend/lib/site-chrome';
import { Link } from '@inertiajs/react';

type PageBreadcrumbProps = {
    page: string;
    title?: string;
    parentPage?: string;
    parentHref?: string;
};

export function PageBreadcrumb({ page, title, parentPage, parentHref }: PageBreadcrumbProps) {
    const { breadcrumbs } = useSiteChrome();
    const item = breadcrumbs[page];
    const heading = title ?? item?.title ?? '';
    const image = item?.imageUrl || '/assets/images/breadcrumb/breadcrumb.jpg';
    const parentTitle = parentPage ? breadcrumbs[parentPage]?.title : '';

    return (
        <section className="breadcrumb-section">
            <div className="breadcrumb-wapper" data-img-src={image}>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="breadcrumb-content">
                                <div className="breadcrumb-title wow fadeInUp" data-wow-delay=".2s">
                                    <h1>{heading}</h1>
                                </div>
                                <nav aria-label="breadcrumb" className="wow fadeInUp" data-wow-delay=".3s">
                                    <ol className="breadcrumb">
                                        <li className="breadcrumb-item">
                                            <Link href="/">Home</Link>
                                        </li>
                                        {parentTitle && parentHref && (
                                            <li className="breadcrumb-item">
                                                <Link href={parentHref}>{parentTitle}</Link>
                                            </li>
                                        )}
                                        <li className="breadcrumb-item active" aria-current="page">
                                            {heading}
                                        </li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="breadcrumb-shape-bottom">
                    <figure>
                        <img src="/assets/images/shape/shape-bottom-white.png" alt="breadcrumb shape bottom" />
                    </figure>
                </div>
            </div>
        </section>
    );
}