"use client";

import { useEffect, useState } from "react";
import List from "./list";
import SmSearch from "../searchHead/smSearch";
import HeadPageList from "@/app/component/head";
import specialtiesData from "@/data/specialties.json";
import { searchOnList } from "@/helper";
import { request } from "@/services/response";

function SpecialtiesPage({ cityId }) {
  const [all, setAll] = useState(specialtiesData);
  const [filtered, setFiltered] = useState(specialtiesData);

  useEffect(() => {
    request
      .getSpecialtyDoctorCounts(cityId)
      .then((res) => {
        const items = res?.data?.data ?? [];
        setAll(items);
        setFiltered(items);
      })
      .catch(() => {});
  }, [cityId]);

  const handleSearch = (value) =>
    setFiltered(searchOnList(all, value, "name"));

  return (
    <>
      <HeadPageList
        title="تخصص مورد نظر شما چیست؟"
        detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
      >
        <SmSearch
          data={all}
          placeholder="جستجوی تخصص"
          handleSearch={handleSearch}
        />
      </HeadPageList>
      <List specialties={filtered} />
    </>
  );
}

export default SpecialtiesPage;