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 InnerDetails = ({ subCategories }) => {
  const router = useRouter();
  const { category } = router.query;

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

  const handleChange = (e) => {
    setSort(e.target.value);
    console.log("Selected sort:", e.target.value);
  };

  // Safety check
  if (!subCategories || !category) return null;

  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.subCategorySlug}>
              <div className="collections-item">
                <Link
                  href={`/collections/${category}/${sub.subCategorySlug}`}
                >
                  <Image
                    width={868}
                    height={560}
                    src={sub.subCategoryImage}
                    alt={sub.subCategoryName}
                  />
                  <div className="title">{sub.subCategoryName}</div>
                </Link>
              </div>
            </Col>
          ))}
        </Row>
        <Row>
          <Col>
            <div className="text-center">
                <button className="btn3">View More</button>
              </div>
          </Col>
        </Row>
      </div>
    </section>
  );
};

export default InnerDetails;