"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { useState } from "react";

export default function ProductsPage() {
  const [search, setSearch] = useState("");

  const products = [
    { id: "p1", brand: "Inovit", name: "Soybean Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/wooden-spoon-full-raw-buckwheat-marble-surface_114579-25380.jpg" },
    { id: "p2", brand: "Inovit", name: "Corn Gluten Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barley-grains-out-bowl-marble-surface_114579-47809.jpg" },
    { id: "p3", brand: "Inovit", name: "Meat & Bone Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/spices-market-morocco_23-2148129885.jpg" },
    { id: "p4", brand: "Inovit", name: "Sugar Beet Pulp", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fresh-harvested-red-radish-plastic-crate-supermarket_23-2148209755.jpg" },
    { id: "p5", brand: "Inovit", name: "Wheat Bran", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/buckwheat-seeds-isolated-grey_114579-24770.jpg" },
    { id: "p6", brand: "Inovit", name: "Fish Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/common-food-allergens-people_23-2149870515.jpg" }
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="medium"
        sizing="largeSmall"
        background="noiseDiagonalGradient"
        cardStyle="solid"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <NavbarStyleCentered
        navItems={[
            { name: "Home", id: "/" },
            { name: "Products", id: "/products" },
        ]}
        brandName="Inovit"
      />
      <div className="pt-32 pb-20">
        <ProductCatalog 
            layout="page"
            products={products.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))}
            searchValue={search}
            onSearchChange={setSearch}
        />
      </div>
    </ThemeProvider>
  );
}