"use client";

import { useState } from "react";

import List from "./list";
import SearchBar from "./head/SearchBar";
import HeadPageList from "@/app/component/head";
import { useRouter } from "next/navigation";
import specialtiesData from "@/data/specialties.json";

function ClinicsPage({ clinics, matchedCity, matchedState }) {
  const router = useRouter();
  const [filteredClinics, setFilteredClinics] = useState(clinics);

  const [selected, setSelected] = useState({
    province: matchedState?.name || "",
    city: matchedCity?.name || "",
  });

  const handleSearch = (value) => {
    // const current = new URLSearchParams(window.location.search);
    // current.set("search", value);
    // const queryString = current.toString();
    // router.push(`/clinics?${queryString}`);
  };

  return (
    <div>
      <HeadPageList
        title="لیست کلینیک ها و درمانگاه های تخصصی"
        detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
      >
        <SearchBar
          selected={selected}
          state={matchedState}
          setSelected={setSelected}
          handleSearch={handleSearch}
          specialties={specialtiesData}
        />
      </HeadPageList>
      <List selected={selected} clinics={filteredClinics} />
    </div>
  );
}

export default ClinicsPage;