import React from "react";

interface BreadcrumbNavProps {
    currentPage: string;
}

interface PageLink {
    key: string;
    label: string;
    href: string;
}

export default function BreadcrumbNav({ currentPage }: BreadcrumbNavProps): React.ReactElement {
    const pages: PageLink[] = [
        { key: "request", label: "Request Media", href: "/TRip" },
        { key: "management", label: "Manage Requests", href: "/TRip/requests" },
    ];

    return (
        <nav aria-label="breadcrumb" className="mb-8 flex items-center gap-2 text-sm">
            {pages.map(({ key, label, href }, i) => {
                const isActive = currentPage === key;
                return (
                    <React.Fragment key={key}>
                        <a
                            href={href}
                            data-astro-reload
                            className={`px-3 py-1.5 rounded-full transition-colors ${isActive
                                ? "bg-neutral-200 dark:bg-neutral-700 font-semibold text-neutral-900 dark:text-white"
                                : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800"
                                }`}
                            aria-current={isActive ? "page" : undefined}
                        >
                            {label}
                        </a>
                        {i < pages.length - 1 && (
                            <span className="text-neutral-400 dark:text-neutral-600 py-1.5 flex items-center" aria-hidden="true">/</span>
                        )}
                    </React.Fragment>
                );
            })}
        </nav>
    );
}
