import React, { ReactChild } from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';
import { Box } from '../Box';
import { TooltipIcon, TooltipIconProps } from '.';
import * as icons from '../../assets/images/icons';

export default {
  title: 'TooltipIcon',
  component: TooltipIcon,
} as Meta;

const Template: Story<TooltipIconProps> = (args) => <TooltipIcon {...args} />;

export const Default = () => {
  return (
    <>
      <Box p="3">
        <TooltipIcon content="Some helpful information" placement="bottom" />
      </Box>
      <Box p="3">
        <TooltipIcon
          content="More helpful information"
          variant="secondary"
          placement="right"
        >
          Icon with some text
        </TooltipIcon>
      </Box>
    </>
  );
};

export const Warning = Template.bind({});
Warning.args = {
  content: 'Unable to retrieve information',
  iconButtonProps: {
    color: 'yellow.0',
    Asset: icons.SvgAlertCircle,
    width: 20,
    height: 20,
  },
} as TooltipIconProps & { children?: ReactChild };
