Storyden

import { PropsWithChildren } from "react";

import { IconButton } from "@/components/ui/icon-button";
import { InfoIcon } from "@/components/ui/icons/Info";
import * as Popover from "@/components/ui/popover";
import { LStack } from "@/styled-system/jsx";

type Props = {
  title: string;
};

export function InfoTip({ title, children }: PropsWithChildren<Props>) {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <IconButton size="xs" variant="ghost" borderRadius="full">
          <InfoIcon />
        </IconButton>
      </Popover.Trigger>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <LStack gap="1">
            <Popover.Title>{title}</Popover.Title>
            <Popover.Description>{children}</Popover.Description>
          </LStack>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>
  );
}