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

function SpecialtiesPage() {
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  // Filter specialties when search query changes
  useEffect(() => {
    if (searchQuery.trim() === "") {
      setFilteredSpecialties(specialtiesData);
    } else {
      const query = searchQuery.toLowerCase().trim();
      const filtered = specialtiesData.filter((specialty) =>
        specialty.name.toLowerCase().includes(query)
      );
      setFilteredSpecialties(filtered);
    }
  }, [searchQuery]);

  const handleSearch = (query) => {
    setSearchQuery(query);
  };

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

export default SpecialtiesPage;