import Navbar from "./components/Navbar";
import ProductCard from "./components/ProductCards";
import Dropdown from "./components/dropdown/index";
import { filterOperations } from "./components/filterOperations";

const App = () => {
  const { filteredProducts, loading, error, filters, handleFilterChange } =
    filterOperations();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error?.message}</div>;
  }

  const categoryOptions = [
    { value: "all", label: "All Categories" },
    { value: "men's clothing", label: "Men's Clothing" },
    { value: "women's clothing", label: "Women's Clothing" },
    { value: "jewelery", label: "Jewelery" },
    { value: "electronics", label: "Electronics" },
  ];

  const priceOptions = [
    { value: "all", label: "All Prices" },
    { value: "low", label: "Below $50" },
    { value: "mid", label: "$50 - $100" },
    { value: "high", label: "Above $100" },
  ];

  const ratingOptions = [
    { value: "all", label: "All Ratings" },
    { value: "4", label: "4 & Up" },
    { value: "3", label: "3 & Up" },
    { value: "2", label: "2 & Up" },
  ];

  return (
    <div className="bg-gradient-to-r from-blue-500 via-blue-300 to-blue-100 min-h-screen flex flex-col items-center text-white">
      <header className="w-full py-4 fixed top-0 bg-black bg-opacity-80 z-10">
        <Navbar />
      </header>
      <div className="w-full max-w-screen-lg mt-20 p-4">
        <div className="flex flex-wrap justify-between items-center mb-6 p-4">
          <Dropdown
            name="category"
            value={filters?.category}
            onChange={handleFilterChange}
            options={categoryOptions}
            className="bg-slate-800 text-white rounded p-2 cursor-pointer"
          />

          <Dropdown
            name="price"
            value={filters?.price}
            onChange={handleFilterChange}
            options={priceOptions}
            className="bg-slate-800 text-white rounded p-2 ml-2 cursor-pointer"
          />

          <Dropdown
            name="rating"
            value={filters?.rating}
            onChange={handleFilterChange}
            options={ratingOptions}
            className="bg-slate-800 text-white rounded p-2 cursor-pointer"
          />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
          {filteredProducts?.map((product) => (
            <ProductCard key={product?.id} product={product} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;