import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

import { Body } from '../atoms';
import { Tooltip } from './Tooltip';

<Meta
  title="atoms/Tooltip"
  component={Tooltip}
  parameters={{ actions: { argTypesRegex: '^on.*' } }}
/>

# Tooltip

## Top

<Canvas>
  <Story name="Top" args={{ children: <Body>Foo bar</Body>, tooltip: 'Baz qux' }}>
    {(props) => <Tooltip {...props} />}
  </Story>
</Canvas>

## Right

<Canvas>
  <Story
    name="Right"
    args={{ children: <Body>Foo bar</Body>, tooltip: 'Baz qux', placement: 'right' }}>
    {(props) => <Tooltip {...props} />}
  </Story>
</Canvas>

## Bottom

<Canvas>
  <Story
    name="Bottom"
    args={{ children: <Body>Foo bar</Body>, tooltip: 'Baz qux', placement: 'bottom' }}>
    {(props) => <Tooltip {...props} />}
  </Story>
</Canvas>

## Left

<Canvas>
  <Story
    name="Left"
    args={{ children: <Body>Foo bar</Body>, tooltip: 'Baz qux', placement: 'left' }}>
    {(props) => <Tooltip {...props} />}
  </Story>
</Canvas>

## Icon

<Canvas>
  <Story name="Icon" args={{ tooltip: 'Foo bar', placement: 'right' }}>
    {(props) => <Tooltip {...props} />}
  </Story>
</Canvas>
