'use client';
import { pageStore } from '@/shared/store/pageStore';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from '@/shared/ui/breadcrumb';
import Link from 'next/link';

const PaginationPage = () => {
  const { breadcrumbs } = pageStore((state) => state);
  return (
    <>
      {breadcrumbs && breadcrumbs.length > 0 && (
        <Breadcrumb className="">
          <BreadcrumbList className="flex-nowrap justify-center">
            {breadcrumbs.map((item, index) => (
              <BreadcrumbItem key={index} className="font-semibold">
                {index < breadcrumbs.length - 1 ? (
                  <>
                    <Link
                      href={item.href}
                      className="max-w-xs line-clamp-1  hover:text-primary duration-200"
                    >
                      {item.label}
                    </Link>
                    <div className="w-[10px] flex justify-end">/</div>
                  </>
                ) : (
                  <BreadcrumbPage className="max-w-xs line-clamp-1 font-semibold text-white">
                    {item.label}
                  </BreadcrumbPage>
                )}
              </BreadcrumbItem>
            ))}
          </BreadcrumbList>
        </Breadcrumb>
      )}
    </>
  );
};

export default PaginationPage;
