"use client";

import { useEffect, useState } from "react";
import SearchBar from "./search";
import SortList from "./sortlist";
import ListDoctors from "./listDoctors";
import LocationD from "../icons/LocationD";
import { useSearchParams } from "next/navigation";
import { useProvince } from "@/context/ProvinceProvider";

function DoctorsPage() {
  const [loading, setLoading] = useState(true);
  const searchParams = useSearchParams();
  const { isProvinceInclude } = useProvince();
  const locationSelected = {
    province: searchParams.get("province"),
    city: searchParams.get("city"),
  };
  const [data, setData] = useState({
    expertise: "",
    gender: 0,
    degree: 0,
    turn: true,
  });

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

  return (
    <div className="pt-[95px] sm:pt-[120px] padding-responsive">
      <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
        <div className="flex items-center justify-start gap-2 w-full">
          <LocationD />
          <p className="text-[#525252] text-[16px] font-semibold">
            {" "}
            {isProvinceInclude?.name || locationSelected.province || "استان"}
            {/* {isProvinceInclude?.name ? "" : " / "} */}
            {" / "}
            {locationSelected.city || "شهر"}
          </p>
        </div>
        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
          <SearchBar data={data} setData={setData} />
          <SortList data={data} setData={setData} />
        </div>
      </div>
      <ListDoctors loading={loading} />
    </div>
  );
}

export default DoctorsPage;