Untitled

import React,{useState} from "react";
import {Link} from "react-router-dom"
import KidsTowel from "../assets/kids-towel.webp";
import KidsBedding from "../assets/kids-bedding.webp";
import KidsPillow from "../assets/kids-pillow.webp";
import "./ReadyMadeCurtain.css";

const kidsProducts = [
  { id: 1, name: "Kids Towel Set", price: "₹499", image: KidsTowel },
  { id: 2, name: "Kids Bedding Set", price: "₹1,299", image: KidsBedding },
  { id: 3, name: "Kids Pillow Cover", price: "₹399", image: KidsPillow },
];

const sizeOptions = ["Single Quilt", "Single Bed Sheet", "Double Bed Sheet set"];
const colorOptions = [
  { label: "Beige", color: "#F5F5DC" },
  { label: "Blue", color: "#0000FF" },
  { label: "Brown", color: "#8B4513" },
  { label: "Grey", color: "#808080" },
  { label: "White", color: "#FFFFFF" },
  { label: "Pink", color: "#FFC0CB" },
  { label: "Turquoise", color: "#40E0D0" },
  { label: "Orange", color: "#FFA500" },
  { label: "Yellow", color: "#FFFF00" },
  { label: "Golden", color: "#FFD700" },
  { label: "Green", color: "#008000" },
  { label: "Red", color: "#FF0000" },
];

const Kids = () => {
  const [selectedSizes, setSelectedSizes] = useState([]);
  const [selectedColors, setSelectedColors] = useState([]);
  const [priceRange, setPriceRange] = useState(2000);
  const [isSizeOpen, setIsSizeOpen] = useState(false);
  const [isColorOpen, setIsColorOpen] = useState(false);
  const [isPriceOpen, setIsPriceOpen] = useState(false);
  const [sortOption, setSortOption] = useState('');
  const [products, setProducts] = useState(kidsProducts);

  // Handle sorting
  const handleSort = (e) => {
    const value = e.target.value;
    setSortOption(value);

    let sortedProducts = [...products];
    if (value === "Price: Low to High") {
      sortedProducts.sort((a, b) => a.price - b.price);
    } else if (value === "Price: High to Low") {
      sortedProducts.sort((a, b) => b.price - a.price);
    } else if (value === "Popularity") {
      sortedProducts.sort(() => Math.random() - 0.5);
    }
    setProducts(sortedProducts);
  };

  // Handle size filter selection
  const handleSizeChange = (size) => {
    setSelectedSizes((prevSelected) =>
      prevSelected.includes(size)
        ? prevSelected.filter((s) => s !== size)
        : [...prevSelected, size]
    );
  };

  // Handle color filter selection
  const handleColorChange = (color) => {
    setSelectedColors((prevSelected) =>
      prevSelected.includes(color)
        ? prevSelected.filter((c) => c !== color)
        : [...prevSelected, color]
    );
  };

  // Filter products based on selected filters
  const filteredKids = products.filter((product) => 
    (selectedSizes.length === 0 || selectedSizes.includes(product.size)) &&
    (selectedColors.length === 0 || selectedColors.includes(product.color)) &&
    product.price <= priceRange
  );



  return (
    <div className="curtain-page">
      <div className="breadcrumb">
      <Link to="/">Home</Link> / 
      <Link to="/shop">Shop</Link> / 
      <span className="current-page">KIDS COLLECTION</span>
      </div>

      <div className="curtain-container">
        {/* Sidebar Section */}
        <aside className="sidebar">
        <h3>Shop By</h3>
        {/* Size Filter */}
        <div className="filter-section">
          <div className="filter-header" onClick={() => setIsSizeOpen(!isSizeOpen)}>
            <strong>Size</strong> <span>{isSizeOpen ? "−" : "+"}</span>
          </div>
          {isSizeOpen && (
            <ul className="filter-options">
              {sizeOptions.map((size) => (
                <li key={size}>
                  <input
                    type="checkbox"
                    checked={selectedSizes.includes(size)}
                    onChange={() => handleSizeChange(size)}
                  />
                  <label>{size}</label>
                </li>
              ))}
            </ul>
          )}
        </div>

        {/* Color Filter */}
        <div className="filter-section">
          <div className="filter-header" onClick={() => setIsColorOpen(!isColorOpen)}>
            <strong>Color</strong> <span>{isColorOpen ? "−" : "+"}</span>
          </div>
          {isColorOpen && (
            <div className="color-options">
              {colorOptions.map((color) => (
                <div 
                  key={color.label} 
                  className={`color-circle ${selectedColors.includes(color.label) ? 'selected' : ''}`} 
                  style={{ backgroundColor: color.color }}
                  onClick={() => handleColorChange(color.label)}
                ></div>
              ))}
            </div>
          )}
        </div>

        {/* Price Filter */}
        <div className="filter-section">
          <div className="filter-header" onClick={() => setIsPriceOpen(!isPriceOpen)}>
            <strong>Price</strong> <span>{isPriceOpen ? "−" : "+"}</span>
          </div>
          {isPriceOpen && (
            <div className="price-filter">
              <input
                type="range"
                min="1000"
                max="2000"
                step="100"
                value={priceRange}
                onChange={(e) => setPriceRange(Number(e.target.value))}
              />
              <p>Up to ₹{priceRange}</p>
            </div>
          )}
        </div>
        </aside>

        {/* Main Content Section */}
        <main className="curtain-content">
        <div className="content-header">
          <h2>Kids <span className="items-count">({filteredKids.length})</span></h2>
          <select className="sort-dropdown" value={sortOption} onChange={handleSort}>
            <option>Sort By</option>
            <option>Price: Low to High</option>
            <option>Price: High to Low</option>
            <option>Popularity</option>
          </select>
        </div>

        <div className="curtain-list">
          {filteredKids.length > 0 ? (
            filteredKids.map((product) => (
              <div key={product.id} className="curtain-card">
                <img src={product.image} alt={product.name} />
                <h3>{product.name}</h3>
                <p className="price">₹{product.price}</p>
              </div>
            ))
          ) : (
            <p>No products found. Please adjust your filters.</p>
          )}
        </div>
        </main>
        </div>
        </div>
        );
        };
export default Kids;