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

import docs from './hide.mdx';

export default {
  title: 'Utilities|Responsive Hide',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const StyledBox = styled(Box)`
  background: ${getPaletteColor('brand-secondary-bg')};
  border-radius: 10px;
  color: ${getPaletteColor('brand-secondary-fg')};
`;

export const Demo = () => (
  <Box spacing={['mv4', 'mhauto', 'p2']}>
    <StyledBox hide="sm" spacing={['p2', 'm1']}>
      I am hidden in the small breakpoint
    </StyledBox>
    <StyledBox hide="xl" spacing={['p2', 'm1']}>
      I am hidden in the extra large breakpoint
    </StyledBox>
    <StyledBox hide={['sm', 'xl']} spacing={['p2', 'm1']}>
      I am hidden in small and extra large breakpoints
    </StyledBox>
  </Box>
);
