import { css } from 'styled-components';

type Breakpoint = {
  cssProp: string;
  cssPropUnits: string;
  values: { [key: number]: number }[];
  mediaQueryType: 'max-width' | 'min-width' | 'max-height' | 'min-height';
};

export const breakpoints = (breakpoints: Breakpoint) => {
  const { cssProp, cssPropUnits, values, mediaQueryType } = breakpoints;
  
  const breakpointProps = values.reduce((mediaQueries, value) => {
    const [screenBreakpoint, cssPropBreakpoint] = [Object.keys(value)[0], Object.values(value)[0]];
    return (mediaQueries += `
    @media screen and (${mediaQueryType}: ${screenBreakpoint}px) {
      ${cssProp}: ${cssPropBreakpoint}${cssPropUnits};
    }
    `);
  }, '');

  return css`
    ${breakpointProps}
  `;
};