Storyden

import { Presence } from "@ark-ui/react";
import type { PropsWithChildren } from "react";

import { css } from "@/styled-system/css";
import { VStack, styled } from "@/styled-system/jsx";
import { AdmonitionVariantProps, admonition } from "@/styled-system/recipes";

import { Button } from "./button";

export const _Admonition = styled("aside", admonition);

export type AdmonitionProps = {
  value: boolean;
  onChange?: (visible: boolean) => void;
  title?: string;
} & AdmonitionVariantProps;

export function Admonition(props: PropsWithChildren<AdmonitionProps>) {
  function handleClose() {
    props.onChange?.(false);
  }

  const [admonitionVariantProps] = admonition.splitVariantProps(props);

  return (
    <Presence
      className={css({ w: "full" })}
      present={props.value}
      lazyMount
      unmountOnExit
    >
      <_Admonition {...admonitionVariantProps}>
        <VStack alignItems="start">
          {props.title && (
            <styled.h1 fontWeight="bold">{props.title}</styled.h1>
          )}
          {props.children}
        </VStack>
        <Button size="xs" variant="ghost" onClick={handleClose}>
          Close
        </Button>
      </_Admonition>
    </Presence>
  );
}