export const breakpoints = {
  xs: 0,
  sm: 520,
  md: 768,
  lg: 1024,
  xl: 1320,
  all: 0
};

export type BreakPointKeys = keyof typeof breakpoints;
export type MQ = Partial<Record<BreakPointKeys, string>> | string;

export const getMediaQuery = (
  minWidth?: keyof typeof breakpoints,
  maxWidth?: keyof typeof breakpoints
) => () => {
  const queries = ['@media screen'];
  if (minWidth && breakpoints[minWidth]) {
    queries.push(` and (min-width: ${breakpoints[minWidth]}px)`);
  }
  if (maxWidth) {
    queries.push(` and (max-width: ${breakpoints[maxWidth] - 1}px)`);
  }
  return queries.join('');
};