import { FlattenSimpleInterpolation } from 'styled-components';
import {
  breakpoints,
  getBreakpointValue,
} from '../../../utils/responsiveBreakpoints';

const BREAKPOINT_TO_INDEX = {
  sm: 1,
  md: 2,
  lg: 3,
  xl: 4,
} as const;

export const mapBreakpointCss = <T>(
  array: [T, T, T, T, T],
  fn: (value: T) => string | FlattenSimpleInterpolation
) => {
  return `
    ${fn(array[0])}
    ${breakpoints
      .map(
        bp => `
          @media (min-width: ${getBreakpointValue(bp)}px) {
            ${fn(array[BREAKPOINT_TO_INDEX[bp]])}
          }
        `
      )
      .join('')}
  `;
};