// FilterModal.jsx
import React, { useState } from "react";
import { IconButton, Dialog, DialogTitle, DialogContent, Box } from "@mui/material";
import { X, SlidersHorizontal } from "lucide-react";
import FilterForm from "./FilterForm";

const FilterModal = () => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      {/* Filter Icon Button (place this in your page header / toolbar) */}
      <IconButton
        onClick={handleOpen}
        aria-label="open filters"
        color="primary"
        size="large"
      >
        <SlidersHorizontal size={22} />
      </IconButton>

      {/* Modal */}
      <Dialog
        open={open}
        onClose={handleClose}
        fullWidth
        maxWidth="md" // adjust: "sm" | "md" | "lg"
      >
        <DialogTitle sx={{background:"#f5fbff"}}>
          <Box display="flex" alignItems="center" justifyContent="space-between">
            <span>Filter Options</span>
            <IconButton onClick={handleClose} aria-label="close">
              <X size={20} />
            </IconButton>
          </Box>
        </DialogTitle>

        <DialogContent dividers>
          {/* Use your existing FilterForm here */}
          <FilterForm />
        </DialogContent>
      </Dialog>
    </>
  );
};

export default FilterModal;