import { Suspense } from 'react';
import { Product, Brand, Category } from '@/types';
import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb';
import { CatalogSidebar } from '@/components/CatalogSidebar/CatalogSidebar';
import { ProductCard } from '@/components/ProductCard/ProductCard';
import styles from './CatalogView.module.scss';

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface CatalogViewProps {
  products: Product[];
  breadcrumbItems: BreadcrumbItem[];
  basePath?: string;
  hiddenFilters?: string[];
  brands: Brand[];
  categories: Category[];
  allProducts?: Product[];
}

export function CatalogView({
  products,
  breadcrumbItems,
  basePath = '/catalog',
  hiddenFilters,
  brands,
  categories,
  allProducts,
}: CatalogViewProps) {
  return (
    <div className={styles.layout}>
      <Suspense fallback={null}>
        <CatalogSidebar
          basePath={basePath}
          hiddenFilters={hiddenFilters}
          brands={brands}
          categories={categories}
          products={allProducts ?? products}
        />
      </Suspense>
      <div className={styles.main}>
        <div className={styles.header}>
          <Breadcrumb items={breadcrumbItems} />
          <span className={styles.count}>{products.length} позиций</span>
        </div>
        <div className={styles.grid}>
          {products.map((p) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </div>
        {products.length === 0 && (
          <p className={styles.empty}>
            По выбранным фильтрам ничего не найдено.
          </p>
        )}
      </div>
    </div>
  );
}