'use client';

import { useTranslation } from "@/lib/hooks/useTranslation";
import { Product } from "lib/shopify/types";
import { useState } from "react";
import { Heading } from "../../ui/Typography";
import { FilterSidebar } from "../FilterSidebar";
import { FilterButton } from "../ProductComponents/FilterButton";
import { FilterTagList } from "../ProductComponents/FilterTagList";
import { ProductsList } from "../ProductComponents/ProductsList";
import { ProductCounter } from "../client/ProductCounter";
import { SortDropdown } from "../client/SortDropdown";
import { useProductFilters } from "../hooks/useProductFilters";

interface ProductGridWithTranslationProps {
  products: Product[];
}

export function ProductGridWithTranslation({ products }: ProductGridWithTranslationProps) {
  const { t } = useTranslation();
  const [isSidebarOpen, setSidebarOpen] = useState(false);
  const { 
    activeFilters, 
    sortOption, 
    sortedProducts, 
    handleApplyFilters, 
    handleSortChange, 
    removeFilter, 
    clearAllFilters, 
    formatFilterTag 
  } = useProductFilters(products);

  return (
    <div className="w-full">
      <div>
        <Heading level={2} className="mb-8">{t('products.title')}</Heading>
        
        {/* Filter and Sort Controls */}
        <div className="flex justify-between items-center mb-4">
          <FilterButton 
            onClick={() => setSidebarOpen(true)} 
            filterText={t('products.filters.button')} 
          />
          <SortDropdown 
            value={sortOption} 
            onChange={handleSortChange} 
          />
        </div>
        
        {/* Filter tags and product count */}
        <div className="flex justify-between items-center mb-8">
          <FilterTagList 
            filters={activeFilters} 
            formatTag={formatFilterTag} 
            onRemove={removeFilter} 
            onClearAll={clearAllFilters}
            clearAllText={t('products.filters.clearAll')}
          />
          <ProductCounter count={sortedProducts.length} />
        </div>
        
        {/* Products grid */}
        <ProductsList products={sortedProducts} />
      </div>

      {/* Filter Sidebar */}
      <FilterSidebar
        isOpen={isSidebarOpen}
        onClose={() => setSidebarOpen(false)}
        onApplyFilters={handleApplyFilters}
        activeFilters={activeFilters}
      />
    </div>
  );
} 