"use client";

import { usePathname } from "next/navigation";
import { getDashboardBreadcrumb } from "@/lib/dashboard-route-utils";

export function DashboardBreadcrumb() {
  const pathname = usePathname();

  const { title, breadcrumb } = getDashboardBreadcrumb(pathname);

  return (
    <div className="min-w-0">
      <nav
        aria-label="Breadcrumb"
        className="text-xs font-medium text-slate-400"
      >
        <ol className="flex flex-wrap items-center">
          {breadcrumb.map((item, index) => {
            const isLast = index === breadcrumb.length - 1;

            return (
              <li
                key={`${item}-${index}`}
                className="flex items-center"
              >
                {index > 0 && (
                  <span className="mx-1" aria-hidden="true">
                    /
                  </span>
                )}

                <span
                  aria-current={isLast ? "page" : undefined}
                  className={
                    isLast
                      ? "text-violet-600"
                      : "text-slate-400"
                  }
                >
                  {item}
                </span>
              </li>
            );
          })}
        </ol>
      </nav>

      <h1 className="mt-0.5 truncate text-lg font-bold text-slate-900">
        {title}
      </h1>
    </div>
  );
}