import React from "react";

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

    return (
        <div>
            <nav aria-label="breadcrumb" className="mb-6 flex gap-4 text-sm font-medium text-blue-600 dark:text-blue-400">
                {pages.map(({ key, label, href }, i) => {
                    return (
                        <React.Fragment key={key}>
                            <a
                                href={href}
                                className={`${currentPage === key
                                    ? "!font-bold underline" // active: always underlined + bold
                                    : "hover:underline"     // inactive: underline only on hover
                                    }`}
                                aria-current={currentPage === key ? "page" : undefined}
                            >
                                {label}
                            </a>
                            {i < pages.length - 1 && <span aria-hidden="true">/</span>}
                        </React.Fragment>
                    );
                })}
            </nav >
        </div>
    );
}
