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

const InnerDetailsSubCategory = ({ products }) => {
  const router = useRouter();
  const { category, subCategory } = router.query;

  const [sort, setSort] = useState("");

  if (!products || !category || !subCategory) return null;

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

  // Optional sorting
  const sortedProducts = [...products].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">

        {/* Header */}
        <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>

        {/* Products */}
        <Row>
          {sortedProducts.map((product) => (
            <Col md={6} key={product.productSlug}>
              <div className="collections-item">
                <Link
                  href={`/collections/${category}/${subCategory}/${product.productSlug}`}
                >
                  <Image
                    width={868}
                    height={560}
                    src={product.image}
                    alt={product.title}
                  />
                  <div className="title">{product.title}</div>
                </Link>
              </div>
            </Col>
          ))}
        </Row>

      </div>
    </section>
  );
};

export default InnerDetailsSubCategory;