import {
  Container,
  Flex,
  Heading,
  Spacer,
  Text,
} from "@chakra-ui/react";

export default function ({
  heading,
  message,
}: {
  heading: string;
  message: string;
}) {
  return (
    <Container
      left="50%"
      maxW="container.md"
      pos="absolute"
      top="50%"
      transform="translate(-50%, -50%)"
    >
      <Flex>
        <Spacer />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="128"
          height="128"
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
          <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
        </svg>
        <Spacer />
      </Flex>
      <br />
      <Heading textAlign="center">{heading}</Heading>
      <br />
      <Text textAlign="center">{message}</Text>
    </Container>
  );
}