import React from "react";
import styles from "./Products.module.css";
import SidebarCategories from "../../features/catalog/SidebarCategories";
import CategoryCards from "../../features/catalog/CategoryCards";
import Filters from "../../features/catalog/CategoryFilters";
import ProductGrid from "../../features/catalog/ProductGrid";
import Pagination from "../../features/catalog/Pagination";
import { useAppSelector } from "../../app/hooks";

const ProductsPage: React.FC = () => {
  const { selectedCategoryId } = useAppSelector(s => s.categories);

  return (
    <div className={styles.wrapper}>
      <SidebarCategories />
      <div className={styles.content}>
        {!selectedCategoryId ? (
          <CategoryCards onSelect={(id) => {}} />
        ) : (
          <>
            <div className={styles.leftControls}>
              <Filters />
            </div>

            <div className={styles.productsArea}>
              <ProductGrid />
              <Pagination categoryId={selectedCategoryId} />
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default ProductsPage;