import { css } from 'styled-components';

export const sizes: { [label: string]: number } = {
  extra: 1080,
  large: 980,
  medium: 768,
  small: 576,
  extraSmall: 480
};

// Media queries helper
// Usage : mediaMin.small(css(`selector { ... }`))
export const mediaMin = Object.keys(sizes).reduce((acc: any, label: string) => {
  acc[label] = (...args: any) => css`
    @media (min-width: ${sizes[label] / 16}em) {
      ${args}
    }
  `;

  return acc;
}, {});

export const mediaMax = Object.keys(sizes).reduce((acc: any, label: string) => {
  acc[label] = (...args: any) => css`
    @media (max-width: ${sizes[label] / 16}em) {
      ${args}
    }
  `;

  return acc;
}, {});