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

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

  const searchHandler = (e) => {
    const value = e.target.value
    setFilteredSpecialties(
      specialtiesData.filter(item =>
        item.name.toLowerCase().includes(value)
      )
    )
  };

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

export default SpecialtiesPage;