import { Box, Flex, Heading } from "@radix-ui/themes";
import { ReactNode } from "react";

export default function GhostMessage({ icon, header, message }: { icon: ReactNode, header: string, message?: string }) {
  return (
    <Flex align="center" direction="column" m="6" className="select-none">
      <Box mb="2" style={{ color: "gray" }}>{icon}</Box>
      <Heading size="3" weight="medium" color="gray">{header}</Heading>
      {message && <Heading size="1" weight="medium" color="gray">{message}</Heading>}
    </Flex>
  );
}