"use client";

import Link from "next/link";
// import { usePathname } from "next/navigation";

export default function Page({
  item,
}: {
  item: { link?: string; name: string }[];
}) {
  // const pathname = usePathname();
  // const segments = pathname.split("/").filter((s) => s && s !== "info");

  // const formatSegment = (segment: string) =>
  //   segment.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());

  return (
    <div className="main-container mobile-container py-2">
      <nav aria-label="breadcrumbs" className="swan-breadcrumbs">
        <ul className="flex items-center text-base text-gray-700">
          <li>
            <Link
              href="/"
              className="text-[#6c6c6c] hover:underline transition-colors"
            >
              Home
            </Link>
          </li>

          {item?.length > 0
            ? item.map((segment, index) => {
              const isLast = index === item.length - 1;
              return (
                <li key={index} className="flex items-center">
                  <span className="mx-2 text-gray-400">›</span>

                  {isLast ? (
                    <span className="text-gray-600 font-semibold cursor-default">
                      {segment?.name}
                    </span>
                  ) : (
                    <Link
                      href={segment.link ? segment.link : "/"}
                      className="text-[#6c6c6c] hover:underline transition-colors"
                    >
                      {segment?.name}
                    </Link>
                  )}
                </li>
              );
            })
            : null}
        </ul>
      </nav>
    </div>
  );
}