import React from "react";
import { Box, Center, ActionIcon, Text } from "@mantine/core";
import { IconCircleDashedCheck, IconX } from "@tabler/icons-react";

interface SuccessMessageProps {
  username: string;
  onClose: () => void;
}

export default function SuccessMessage({
  username,
  onClose,
}: SuccessMessageProps) {
  return (
    <Center style={{ height: "400px" }}>
      <Box
        style={{
          width: "375px",
          height: "375px",
          backgroundColor: "#f0f0f0",
          borderRadius: "8px",
          position: "relative",
          boxShadow: "0px 4px 10px rgba(0,0,0,0.1)",
          justifyContent: "center",
          textAlign: "center",
        }}
      >
        <ActionIcon
          onClick={onClose}
          style={{
            position: "absolute",
            top: "10px",
            left: "10px",
          }}
        >
          <IconX size={24} />
        </ActionIcon>
        <Center
          style={{
            flexDirection: "column",
            height: "100%",
          }}
        >
          <IconCircleDashedCheck size={100} color="green" />
          <Text mt="lg" size="lg" style={{ fontWeight: 500, align: "center" }}>
            New User <b>{username}</b> created Successfully
          </Text>
        </Center>
      </Box>
    </Center>
  );
}
