Untitled

import React, { useState } from 'react';
import { Link } from 'react-router-dom'; 
import Verena from "../assets/Varena.jpg";
import Damaris from "../assets/Damaris.jpg";
import Cecelia from "../assets/Cecelia.jpg";
import './CushionCover.css'; 

const cushionProducts = [
  { id: 1, name: "Verena", price: 1599, image: Verena, size: "Large Door", color: "Beige" },
  { id: 2, name: "Damaris", price: 1699, image: Damaris, size: "Door 7 Ft", color: "Blue" },
  { id: 3, name: "Cecelia", price: 1799, image: Cecelia, size: "Window", color: "Brown" },
];

const sizeOptions = ["Set Of % Cushion Cover"];
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 CushionCover = () => {
  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(cushionProducts);

  // 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 filteredCushion = products.filter((product) => 
    (selectedSizes.length === 0 || selectedSizes.includes(product.size)) &&
    (selectedColors.length === 0 || selectedColors.includes(product.color)) &&
    product.price <= priceRange
  );
  return (
    <div className="cushion-page">
      <div className="breadcrumb">
      <Link to="/">Home</Link> / 
      <Link to="/shop">Shop</Link> / 
        <span className="current-page">Cushion Covers</span>
      </div>

      <div className="cushion-container">
        <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 */}
         {/* 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 className="curtain-content">
          <div className="content-header">
            <h2>READY MADE CURTAINS <span className="items-count">({filteredCushion.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">
            {filteredCushion.length > 0 ? (
              filteredCushion.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 CushionCover;