import React from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

type CategoryBreadcrumbProps = {
  categoryNames: string;
  categoryIds: string;
};

export default function CategoryBreadcrumb({
  categoryNames,
  categoryIds,
}: CategoryBreadcrumbProps) {
  const names = categoryNames.split(",");
  const ids = categoryIds.split(",");

  return (
    <Breadcrumb>
      <BreadcrumbList>
        {names.map((name, index) => (
          <React.Fragment key={ids[index]}>
            <BreadcrumbItem>
              <BreadcrumbLink href={`/category/${ids[index]}`}>
                {name}
              </BreadcrumbLink>
            </BreadcrumbItem>
            {index < names.length - 1 && <BreadcrumbSeparator />}
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}