import { frequentSearches } from "@/constans";
import { filterList } from "@/helper";
import { Button } from "@mui/material";
import specialties from "@/data/specialties.json";
import Link from "next/link";

function FrequentSearches() {
  const childrenList = specialties.filter((item) => item.parent);
  console.log(childrenList);

  return (
    <div className="flex items-center justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full">
      <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-normal text-nowrap">
        جستجوهای پر تکرار:
      </p>
      <div className="overflow-auto hidden-scroll flex justify-start max-w-[620px]">
        <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
          {childrenList.map((item, idx) => (
            <Link
              href={{
                pathname: "/doctors",
                query: {
                  category: item.parent,
                  specialties: item.id,
                },
              }}
            >
              <li key={idx}>
                <Button
                  variant="contained"
                  color="secondary"
                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] 
                !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
                >
                  {item.name}
                </Button>
              </li>
            </Link>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default FrequentSearches;