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";
import { cleanImage } from "../services/imageHandling";

const InnerDetails = ({ subCategories }) => {

  const router = useRouter();
  const { category } = router.query;

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

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

  // Safety check
  if (!subCategories || !category) return null;
// const filteredSubCategories = subCategories.filter(
//   (item) => item?.collection_category?.slug === "kitchens"
// );
  return (
    <section className="collection-m-section sec_padd">
      <div className="custom_container">
        {/* Header Row */}
        <Row>
          <Col xs={6}>
            <h3>
              {category
                .split("-")
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(" ")}
            </h3>
          </Col>

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

        {/* Sub-category cards */}
        <Row>
          {subCategories?.map((sub) => (
            <Col md={6} key={sub.slug}>
              <div className="collections-item">
                {/* <Link
                  href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
                > */}
                <Link
  href={
    sub?.show_detail_page
      ? `/collections/${category}/${sub?.show_detail_page?.slug}`
      : `/collections/${category}/${sub.slug}`
  }
>

                  <Image
                    width={868}
                    height={560}
                    src={cleanImage(sub.image?.url)}
                    alt={sub.title}
                  />
                  <div className="title">{sub.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 InnerDetails;