import { mapValues, omit } from 'es-toolkit';

export const breakpointOrigin = {
  xs: '0px',
  s: '600px',
  m: '1024px',
  l: '1366px',
  xl: '1536px',
  xxl: '1920px',
  xxxl: '2560px',
} as const;

// xs(0px)는 max-width breakpoint 로 의미가 없어 제외한다.
export const breakpoint = mapValues(
  omit(breakpointOrigin, ['xs']),
  (value) => `@media (max-width: ${value})`,
);