import { css } from 'styled-components'

export const breakpoints = {
  tablet: 768,
  laptop: 992,
  desktop: 1281
}

function generateMediaQueriesForStyledComponents() {
  // Why em instead of px? Glad you asked:
  // https://cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/
  return Object.keys(breakpoints).reduce((acc, label) => {
    acc[label] = (...args) => css`
      @media (min-width: ${breakpoints[label] / 16}em) {
        ${css(...args)};
      }
    `
    return acc
  }, {})
}

const mediaQueriesStyledComponents = generateMediaQueriesForStyledComponents()
export default mediaQueriesStyledComponents
