/* eslint-disable react/jsx-no-comment-textnodes */
/* eslint-disable @next/next/no-img-element */
"use client";

import React from 'react';

// Define the structure for a single breadcrumb item
interface BreadcrumbItem {
    name: string;
    href: string;
}

// Define the props structure for the component
interface BreadcrumbProps {
    breadcrumbs: BreadcrumbItem[];
    pageTitle: string;
    description: string;
    backgroundImageUrl?: string;
}

// Placeholder background Image
const DEFAULT_BACKGROUND_IMAGE = "/img/bg/breadcrumb.jpg";

// Main Breadcrumb Component
const Breadcrumb: React.FC<BreadcrumbProps> = ({
    breadcrumbs,
    pageTitle,
    description,
    backgroundImageUrl = DEFAULT_BACKGROUND_IMAGE,
}) => {

    return (
        <section className="relative w-full h-[350px] lg:h-[400px] font-heading overflow-hidden">
            <div className="absolute inset-0">
                // eslint-disable-next-line @next/next/no-img-element
                <img
                    src={backgroundImageUrl}
                    alt="Page background"
                    className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gray-900 opacity-75"></div>
                <div className="absolute inset-0 bg-linear-to-t from-gray-900/10 to-transparent"></div>
            </div>

            <div className="relative max-w-5xl mx-auto h-full flex flex-col justify-center px-4 sm:px-8 lg:px-8 text-white z-10">
                <nav className="flex mb-4" aria-label="Breadcrumb">
                    <ol className="inline-flex items-center space-x-2">
                        {breadcrumbs.map((item, index) => {
                            const isCurrent = index === breadcrumbs.length - 1;
                            return (
                                <li key={item.name} className="inline-flex items-center">
                                    <a
                                        href={item.href}
                                        className={`text-sm font-medium transition-colors ${isCurrent
                                            ? 'text-indigo-400'
                                            : 'text-gray-300 hover:text-white'
                                            }`}
                                        aria-current={isCurrent ? 'page' : undefined}
                                    >
                                        {item.name}
                                    </a>
                                    {!isCurrent && (
                                        <span className="mx-2 text-gray-500 text-sm" aria-hidden="true">/</span>
                                    )}
                                </li>
                            );
                        })}
                    </ol>
                </nav>

                <h1 className="text-6xl sm:text-5xl lg:text-6xl font-extrabold mb-2 max-w-2xl font-heading leading-tight tracking-wide">
                    {pageTitle}
                </h1>

                <p className="mt-1 text-lg text-gray-300 max-w-xl">
                    {description}
                </p>
            </div>
        </section>
    );
};

export default Breadcrumb;