import React from "react";
import { FaArrowsAltV } from "react-icons/fa";

import {
  Menu,
  MenuHandler,
  MenuList,
  MenuItem,
  Button,
  Checkbox,
} from "@material-tailwind/react";
 
export function NestedMenu() {
  const [openMenu, setOpenMenu] = React.useState(false);
  
  return (
    <Menu
      dismiss={{
        itemPress: false,
      }}
    >
      <MenuHandler>
        <Button className="bg-[#AFA0D7]">Date</Button>
      </MenuHandler>
      <MenuList >
        <div className=" overflow-y-auto relative max-h-52">
            <MenuItem className="p-0">
          <label
            htmlFor="item-1"
            className="flex cursor-pointer items-center gap-2 p-2"
          >
            <Checkbox
              ripple={true}
              id="item-1"
              containerProps={ { className: "p-0 block" }}
              className="hover:before:content-none"
            />
            2010
          </label>
        </MenuItem>
            
        </div>
        {/* Menu Item List */}
        
        {/* ... (menu items lainnya di sini) */}
        
        {/* Nested Menu */}
        <Menu
          placement="right"
          open={openMenu}
          handler={setOpenMenu}
          allowHover
          offset={15}
          dismiss={{
            itemPress: false,
          }}
        >
          <MenuHandler className="grid items-center">
            <MenuItem className="sticky top-0 bg-white z-10">
              <div className="flex items-center justify-between">
                Bulan
                <FaArrowsAltV />
              </div>
            </MenuItem>
          </MenuHandler>
          <MenuList className="bg-white z-10 max-h-52 overflow-y-auto">
            <MenuItem className="p-0">
              <label
                htmlFor="item-3"
                className="flex cursor-pointer items-center gap-2 p-2"
              >
                <Checkbox
                  ripple={false}
                  id="item-3"
                  containerProps={{ className: "p-0" }}
                  className="hover:before:content-none"
                />
                Januari
              </label>
            </MenuItem>
            {/* ... (item menu bulan lainnya di sini) */}
          </MenuList>
        </Menu>
      </MenuList>
    </Menu>
  );
}
