// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { ClickOutside } from './click-outside.component';
import type { ClickOutsideProps } from './click-outside.proptypes';
import docs from './click-outside.mdx';
import { Box } from '../../../primitives';
import { Card } from '../../structures';

export default {
  component: ClickOutside,
  title: 'Utilities/Click Outside',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: ClickOutsideProps = {
  onClickOutside: action('Click Outside'),
};

export const Default = () => (
  <Box
    colorName="background"
    spacing="p7"
    stacked="column"
    justify="center"
    align="center"
  >
    <ClickOutside {...DEFAULT_PROPS}>
      <Card spacing="p5" />
    </ClickOutside>
  </Box>
);
