"use client";

import { 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";

function SpecialtiesPage() {
  const [filteredSpecialties, setFilteredSpecialties] =
    useState(specialtiesData);

  const handleSearch = (value) =>
    setFilteredSpecialties(searchOnList(specialtiesData, value, "name"));

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

export default SpecialtiesPage;