import React from "react";
import type { CollapseProps } from "antd";
import { Collapse } from "antd";
import { IoIosArrowDown } from "react-icons/io";
import { SlArrowDown } from "react-icons/sl";
import { useTranslation } from "react-i18next";
import BrandFilter from "../../Components/Products/BrandFilter";
import SearchButton from "../../Components/Utils/Search/SearchButton";
import { useGetCategory } from "../../api/category";


const FilterSection = ({isLoading}:{isLoading:boolean}) => {
  const [noDataFound, setNoDataFound] = useState(false);
  const [openSearch, setOpenSearch] = useState(false);

  // console.log(data?.data);
  const {data:category} = useGetCategory();
  // console.log(category?.data);
  
  const items = category?.data?.map((e:any)=>({
    key:e.id,
    label:e.name,
    children: <BrandFilter id={e.id}/>
  }))


  return (
    <>
    <SearchButton setOpen={setOpenSearch} setNoDataFound={setNoDataFound} />
    <Collapse
      className="filter_collapse"
      expandIconPosition="end"
      expandIcon={SlArrowDown}
      defaultActiveKey={["1"]}
      ghost
      items={items}
    />
    </>
  );
}

export default FilterSection;
