"use client";

import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
import CloseIcon from "@mui/icons-material/Close";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Snackbar from "@mui/material/Snackbar";
import Typography from "@mui/material/Typography";

type MeetingScheduleSuccessToastProps = {
  open: boolean;
  onClose: () => void;
};

export function MeetingScheduleSuccessToast({
  open,
  onClose,
}: MeetingScheduleSuccessToastProps) {
  return (
    <Snackbar
      open={open}
      autoHideDuration={3200}
      onClose={onClose}
      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
    >
      <Box
        role="status"
        sx={{
          width: { xs: "calc(100vw - 32px)", sm: 454 },
          minHeight: 66,
          px: 2,
          py: 1.5,
          borderRadius: 1.5,
          bgcolor: "#3ead46",
          color: "#fafafa",
          display: "flex",
          alignItems: "center",
          gap: 1.5,
          boxShadow:
            "0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)",
        }}
      >
        <Box
          sx={{
            width: 24,
            height: 24,
            border: "2px solid rgba(250, 250, 250, 0.45)",
            borderRadius: "50%",
            display: "grid",
            placeItems: "center",
            flexShrink: 0,
          }}
        >
          <CheckRoundedIcon sx={{ fontSize: 16 }} />
        </Box>

        <Typography
          sx={{
            flex: 1,
            fontSize: 16,
            fontWeight: 600,
            lineHeight: "24px",
          }}
        >
          Submit to CDC successfully
        </Typography>

        <ButtonBase
          aria-label="Close notification"
          onClick={onClose}
          sx={{
            width: 32,
            height: 32,
            borderRadius: 0.75,
            color: "inherit",
            flexShrink: 0,
          }}
        >
          <CloseIcon sx={{ fontSize: 20 }} />
        </ButtonBase>
      </Box>
    </Snackbar>
  );
}