"use client";
import FilterBox from "./filter-checkbox";

interface ProductFilter {
  id: string;
  name: string;
  options: Array<{
    value: string;
    label: string;
    checked: boolean;
  }>;
}

interface SidebarProps {
  isOpenSideBar: boolean;
  closeSidebar: () => void;
  filterData: ProductFilter[];
}

const CategoryFilter: React.FC<SidebarProps> = ({
  isOpenSideBar,
  closeSidebar,
  filterData,
}) => {
  return (
    <div className="relative max-w-screen">
      <div
        className={`fixed top-28 left-0 z-20 min-h-lvh w-full flex-col border-r-1 border-gray-200 bg-white p-5 shadow-2xl md:top-12 md:z-50 md:p-8 md:pt-0 md:pr-2 ${isOpenSideBar ? "translate-x-0" : "-translate-x-full"} max-w-screen transition-transform duration-300 md:w-80`}
      >
        <div className="flex flex-col">
          <button
            type="button"
            className="flex flex-col items-end justify-end p-4"
            onClick={closeSidebar}
          >
            <i className="icon-[mingcute--close-line]"></i>
          </button>
          <FilterBox closeSidebar={closeSidebar} filterData={filterData} />
        </div>
      </div>
    </div>
  );
};
export default CategoryFilter;