"use client";

import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CloseIcon from "@mui/icons-material/Close";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Snackbar from "@mui/material/Snackbar";
import Typography from "@mui/material/Typography";

type ToastNotificationProps = {
  open: boolean;
  message: string;
  autoHideDuration?: number;
  position?: "bottom-center" | "bottom-right";
  closeLabel?: string;
  onClose: () => void;
};

export function ToastNotification({
  open,
  message,
  autoHideDuration = 4000,
  position = "bottom-right",
  closeLabel = "Close notification",
  onClose,
}: ToastNotificationProps) {
  return (
    <Snackbar
      open={open}
      autoHideDuration={autoHideDuration}
      onClose={(_, reason) => {
        if (reason === "clickaway") return;
        onClose();
      }}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: position === "bottom-center" ? "center" : "right",
      }}
    >
      <Box
        role="alert"
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1.5,
          p: 2,
          borderRadius: "12px",
          bgcolor: "#3ead46",
          boxShadow:
            "0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)",
          minWidth: { xs: "calc(100vw - 32px)", sm: 360 },
          maxWidth: 480,
        }}
      >
        <CheckCircleIcon
          sx={{ fontSize: 24, color: "#fafafa", flexShrink: 0 }}
        />

        <Typography
          sx={{
            flex: 1,
            fontSize: 16,
            fontWeight: 600,
            lineHeight: "24px",
            color: "#fafafa",
            wordBreak: "break-word",
          }}
        >
          {message}
        </Typography>

        <IconButton
          onClick={onClose}
          aria-label={closeLabel}
          sx={{
            width: 32,
            height: 32,
            borderRadius: "6px",
            color: "#fafafa",
            flexShrink: 0,
            "&:hover": { bgcolor: "rgba(255, 255, 255, 0.12)" },
          }}
        >
          <CloseIcon sx={{ fontSize: 20 }} />
        </IconButton>
      </Box>
    </Snackbar>
  );
}