import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../docs/utils';

import OverlayedBox from './OverlayedBox';
import Avatar from '../avatar/Avatar';
import Counter from '../counters/Counter';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/OverlayedBox"
  component={OverlayedBox}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    overlay: {
      control: {
        disable: true,
      },
    },
  }}
  args={{
    children: <Avatar />,
    overlay: <Counter>10</Counter>,
  }}
/>

<PageHeader>OverlayedBox</PageHeader>

## Overview

<Canvas>
  <Story name="Default">{args => <OverlayedBox {...args} />}</Story>
</Canvas>

<ArgsTable story="Default" />