import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";

const CatalogueData = [
  {
    productSlug: "ecosophia",
    title: "Ecosophia",
    image: "/image/Catalogue/01.png",
  },
  {
    productSlug: "architectural-scenarios",
    title: "Architectural Scenarios",
    image: "/image/Catalogue/02.png",
  },
  {
    productSlug: "vitrum-arte",
    title: "Vitrum Arte",
    image: "/image/Catalogue/03.png",
  },
  {
    productSlug: "genius-loci",
    title: "Genius Loci",
    image: "/image/Catalogue/04.png",
  },
  {
    productSlug: "essenza",
    title: "Essenza",
    image: "/image/Catalogue/05.png",
  },
  {
    productSlug: "domus-anthology",
    title: "Domus Anthology",
    image: "/image/Catalogue/06.png",
  },
  {
    productSlug: "vitrum-arte",
    title: "Vitrum Arte",
    image: "/image/Catalogue/07.png",
  },
  {
    productSlug: "ecosophia",
    title: "Ecosophia",
    image: "/image/Catalogue/08.png",
  },
  {
    productSlug: "architectural-scenarios",
    title: "Architectural Scenarios",
    image: "/image/Catalogue/09.png",
  },
];

const InnerDetailsCatalogue = ({ subCategory = "indoor-kitchen" }) => {
  const [sort, setSort] = useState("");

  const handleChange = (e) => {
    setSort(e.target.value);
  };

  const sortedProducts = [...CatalogueData].sort((a, b) => {
    if (sort === "name-asc") return a.title.localeCompare(b.title);
    if (sort === "name-desc") return b.title.localeCompare(a.title);
    return 0;
  });

  return (
    <section className="collection-m-section sec_padd">
      <div className="custom_container">
        <Row>
          <Col xs={6}>
            <h3>
              {subCategory
                .split("-")
                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
                .join(" ")}
            </h3>
          </Col>

          <Col xs={6} className="d-flex justify-content-end">
            <select
              className="sortby-select"
              value={sort}
              onChange={handleChange}
            >
              <option value="">Sort By</option>
              <option value="name-asc">Name: A–Z</option>
              <option value="name-desc">Name: Z–A</option>
            </select>
          </Col>
        </Row>

        <Row>
          {sortedProducts.map((product, index) => (
            <Col md={4} key={`${product.productSlug}-${index}`}>
              <div className="collections-item">
                <Link href="#">
                  <Image
                    width={868}
                    height={560}
                    src={product.image}
                    alt={product.title}
                  />
                  <div className="title">{product.title}</div>
                </Link>
              </div>
            </Col>
          ))}
        </Row>
        <Row>
          <Col>
            <div className="text-center">
              <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
            </div>
          </Col>
        </Row>
      </div>
    </section>
  );
};

export default InnerDetailsCatalogue;