import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import type { RootState } from "../../app/store";
import { getCategoryProducts } from "../../features/catalog/catalogSlice";
import CatalogSidebar from "../../features/catalog/catalogeSidebar"
import ProductGrid from "../../features/catalog/ProductGrid";
import styles from "../../features/catalog/catalog.module.css";
import { useAppDispatch, useAppSelector } from "../../app/hooks";

const CatalogPage: React.FC = () => {
  const { category } = useParams<{ category: string }>();
  const dispatch = useAppDispatch()
  const { loading, filtered, error } = useAppSelector((s: RootState) => s.catalog);

  useEffect(() => {
    if (category) dispatch(getCategoryProducts(category));
  }, [category]);

  return (
    <div className={styles.catalogWrapper}>
      <CatalogSidebar />
      <div className={styles.productsSection}>
        {loading && <p>Загрузка...</p>}
        {error && <p>Ошибка: {error}</p>}
        <ProductGrid products={filtered} />
      </div>
    </div>
  );
};

export default CatalogPage;