"use client";

import SmSearch from "@/components/searchHead/smSearch";
import List from "./List";
import { useState } from "react";
import { searchOnList } from "@/helper";

function Doctors({ doctors }) {
  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);

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

  return (
    <div className="opacity-page">
      <div className="flex justify-center">
        <SmSearch
          data={doctors}
          handleSearch={handleSearch}
          placeholder="جستجوی پزشک یا تخصص"
        />
      </div>
      <List doctors={filteredSpecialties} />
    </div>
  );
}

export default Doctors;
