import React from 'react';
import { Box } from '../Box';
import { Text } from '../Text';
import { Tooltip } from '.';

export default {
  title: 'Tooltip',
  component: [Tooltip],
};

export const Default = () => {
  return (
    <>
      <Box p="3">
        <Tooltip
          content="Some helpful information Some helpful information Some helpful information"
          placement="bottom"
        >
          Lorem ipsum dolor
        </Tooltip>
      </Box>
      <Box p="3">
        <Tooltip
          content={<Text variant="c2">More helpful information</Text>}
          variant="secondary"
          placement="right"
        >
          Lorem ipsum dolor
        </Tooltip>
      </Box>
    </>
  );
};
