import React from "react";

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

    return (
        <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) => (
                <React.Fragment key={key}>
                    <a
                        href={href}
                        className={`hover:underline ${currentPage === key ? "font-bold underline" : ""}`}
                        aria-current={currentPage === key ? "page" : undefined}
                    >
                        {label}
                    </a>
                    {i < pages.length - 1 && <span aria-hidden="true">/</span>}
                </React.Fragment>
            ))}
        </nav>
    );
}