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 { Heart, Eye } from "lucide-react";
import "./ReadyMadeCurtain.css";

const curtainProducts = [
  { 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 = ["Large Door", "Door", "Door 7 Ft", "Window"];
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 ReadyMadeCurtains = () => {
  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 [hoveredProduct, setHoveredProduct] = useState(null);

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

  // 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 and sort products
  const filteredCurtains = curtainProducts
    .filter(
      (product) =>
        (selectedSizes.length === 0 || selectedSizes.includes(product.size)) &&
        (selectedColors.length === 0 || selectedColors.includes(product.color)) &&
        product.price <= priceRange
    )
    .sort((a, b) => {
      if (sortOption === "Price: Low to High") return a.price - b.price;
      if (sortOption === "Price: High to Low") return b.price - a.price;
      return 0; // Default (no sorting)
    });

  const handleAddToCart = (product) => {
    console.log(`${product.name} added to cart.`);
  };

  const handleBuyNow = (product) => {
    console.log(`Proceeding to buy ${product.name}.`);
  };

  const handleLike = (product) => {
    console.log(`${product.name} liked.`);
  };

  const handleQuickView = (product) => {
    console.log(`Quick view for ${product.name}.`);
  };

  return (
    <div className="curtain-page">
      {/* Breadcrumb */}
      <div className="breadcrumb">
        <Link to="/">Home</Link> / <Link to="/shop">Shop</Link> / <span className="current-page">READY MADE CURTAINS</span>
      </div>

      <div className="curtain-container">
        {/* Sidebar */}
        <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 */}
        <main className="curtain-content">
          <div className="content-header">
            <h2>
              READY MADE CURTAINS <span className="items-count">({filteredCurtains.length})</span>
            </h2>
            <select className="sort-dropdown" value={sortOption} onChange={handleSort}>
              <option value="">Sort By</option>
              <option value="Price: Low to High">Price: Low to High</option>
              <option value="Price: High to Low">Price: High to Low</option>
            </select>
          </div>

          <div className="curtain-list">
            {filteredCurtains.length > 0 ? (
              filteredCurtains.map((product) => (
                <div
                  key={product.id}
                  className="curtain-card"
                  onMouseEnter={() => setHoveredProduct(product.id)}
                  onMouseLeave={() => setHoveredProduct(null)}
                >
                  <img src={product.image} alt={product.name} className="curtain-image" />
                  <div className="curtain-info">
                  <h3>{product.name}</h3>
                  <p className="price">₹{product.price}</p>
                  </div>

                  {/* Hover Overlay */}
                  {hoveredProduct === product.id && (
                    <div className="hover-overlay">
                      <div className="hover-icons">
                        <Heart className="hover-icon" onClick={() => handleLike(product)} />
                        <Eye className="hover-icon" onClick={() => handleQuickView(product)} />
                      </div>
                      <div className="hover-buttons">
                        <button onClick={() => handleAddToCart(product)} className="btn-add-to-cart">
                          Add to Cart
                        </button>
                        <button onClick={() => handleBuyNow(product)} className="btn-buy-now">
                          Buy Now
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              ))
            ) : (
              <p>No products found. Please adjust your filters.</p>
            )}
          </div>
        </main>
      </div>
    </div>
  );
};

export default ReadyMadeCurtains;