#Adaptive Snackbar

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import CloseIcon from "@mui/icons-material/Close";
import Portal from "@mui/material/Portal";
import { AdaptiveButton } from "adaptive-material-ui/components/button";
import { AdaptiveIconButton } from "adaptive-material-ui/components/iconButton";
import { AdaptiveSnackbar } from "adaptive-material-ui/components/snackbar";
import { useState } from "react";

export default function () {
  const [open, setOpen] = useState(false);

  return (
    <AdaptiveModeDemo>
      <AdaptiveButton onClick={() => setOpen(true)} variant="contained">
        Open
      </AdaptiveButton>

      <Portal>
        <AdaptiveSnackbar
          action={
            <AdaptiveIconButton
              size="small"
              aria-label="close"
              color="inherit"
              onClick={() => setOpen(false)}
            >
              <CloseIcon fontSize="small" />
            </AdaptiveIconButton>
          }
          anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
          autoHideDuration={6000}
          message="Note archived"
          onClose={() => setOpen(false)}
          open={open}
        />
      </Portal>
    </AdaptiveModeDemo>
  );
}