'use client';
import { useCategoryStore } from '@/shared/store/categoryStore';
import useFilterStore from '@/shared/store/filterStore';
import { IBreadcrumbItem, pageStore } from '@/shared/store/pageStore';
import ProductsCategory from '@/widgets/products/ui';
import React, { useEffect } from 'react';

const Products = () => {
  const breadcrumsItem: IBreadcrumbItem[] = [
    {
      label: 'Главная',
      href: '/',
    },
    {
      label: 'Продукты',
      href: '/products',
    },
  ];

  const { onChangePage } = pageStore((state) => state);
  const { categoryId } = useFilterStore();
  const { categories } = useCategoryStore();
  useEffect(() => {
    if (categoryId) {
      const categoryName = categories.find(
        (item) => item.id === categoryId,
      )?.title;
      onChangePage({
        title: categoryName || 'Все продукты',
        breadcrumbs: breadcrumsItem,
      });
      return;
    } else {
      onChangePage({
        title: 'Все продукты',
        breadcrumbs: breadcrumsItem,
      });
    }
  }, [categoryId]);

  return (
    <div>
      <ProductsCategory />
    </div>
  );
};

export default Products;
