import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import {
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
} from "../../storybook-components";
import { Box } from "../Box";
import { Button } from "../Button";
import { FloatingTooltip } from "./FloatingTooltip";

<Meta title="Components/Floating/Tooltip" component={FloatingTooltip} />

<ComponentHeading
  componentName="Tooltip"
  description="A tooltip is a popover used to show a small amount of information when the mouse hovers over a reference element."
  sourcePath="src/components/Floating/Tooltip.tsx"
  waiAriaPath="https://www.w3.org/TR/wai-aria-practices/#tooltip"
/>

<ComponentStatus status={COMPONENT_STATUS.ALPHA} />

The is the next evolution of the Tooltip component using [Floating UI React DOM Interactions](https://floating-ui.com/docs/react-dom-interactions).

## Installation

```jsx
import { FloatingTooltip } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Floating Tooltip">
    <Box className="px-8">
      <FloatingTooltip.Root>
        <FloatingTooltip.Trigger>Trigger</FloatingTooltip.Trigger>
        <FloatingTooltip.Content className="FloatingTooltip">
          My tooltip
        </FloatingTooltip.Content>
      </FloatingTooltip.Root>
    </Box>
  </Story>
</Canvas>

## API

<ArgsTable of={FloatingTooltip} />

## Demos

### Trigger asChild

<Canvas withSource={SourceState.OPEN}>
  <Story name="Floating Tooltip Trigger asChild">
    <Box className="px-8">
      <FloatingTooltip.Root placement="right">
        <FloatingTooltip.Trigger asChild>
          <Button onClick={() => console.log("Click")}>Button</Button>
        </FloatingTooltip.Trigger>
        <FloatingTooltip.Content className="FloatingTooltip">
          My tooltip
        </FloatingTooltip.Content>
      </FloatingTooltip.Root>
    </Box>
  </Story>
</Canvas>

### With arrow

To show an arrow for the tooltip, add the `FloatingTooltip.Arrow` component as
a child of `FloatingTooltip.Content`.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Floating Tooltip with arrow">
    <Box className="px-8">
      <FloatingTooltip.Root placement="right">
        <FloatingTooltip.Trigger asChild>
          <Button>Button</Button>
        </FloatingTooltip.Trigger>
        <FloatingTooltip.Content>
          My tooltip
          <FloatingTooltip.Arrow />
        </FloatingTooltip.Content>
      </FloatingTooltip.Root>
    </Box>
  </Story>
</Canvas>