"use client";
import { useState } from "react";
import FilterButton from "@/core/components/DataTable/filter/FilterButton";
import FilterBody from "@/core/components/DataTable/filter/FilterBody";
import { Box, Drawer } from "@mui/material";

function FilterColumn({ columns, user_id, page_name, table_name }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <FilterButton drawerState={open} setDrawerState={setOpen} />
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        sx={{
          overflowY: "hidden",
          display: "flex",
          flexDirection: "column",
          height: "100%",
          zIndex: "1300",
        }}
      >
        <Box sx={{ width: { xs: 300, sm: 450 } }}>
          {open && (
            <FilterBody
              columns={columns}
              drawerState={open}
              setDrawerState={setOpen}
              user_id={user_id}
              page_name={page_name}
              table_name={table_name}
            />
          )}
        </Box>
      </Drawer>
    </>
  );
}

export default FilterColumn;
