// @flow
import React, { type ComponentType } from 'react';
import styled from 'styled-components';
import { Box, getPaletteColor } from '../../..';

const OutlineBox = styled(Box)`
  border: dotted ${getPaletteColor('greyscale-medium')} 2px;
`;

/**
 * A utility that lets you quickly generate stories that excercise the margin spacing props.
 *
 * This is especially useful for Eyebot regression checking.
 */
export type MarginCheckerProps<ComponentProps> = {|
  Component: ComponentType<ComponentProps>,
  ...ComponentProps,
|};
export const MarginChecker = <ComponentProps>({
  Component,
  ...props
}: MarginCheckerProps<ComponentProps>) => (
  <Box stacked="row" wrap align="start">
    {['m2', 'mt2', 'mr2', 'mb2', 'ml2', 'mv2', 'mh2'].map((m) => (
      <Box spacing="m1" key={m}>
        <code>{m}</code>
        <OutlineBox shrink={1}>
          <Component {...props} spacing={m} />
        </OutlineBox>
      </Box>
    ))}
  </Box>
);
