import { css } from '@emotion/react';
import { spacing } from '../../../../src/style/variables';
import { Prefix } from '../constants';
import { getVarValue } from '../helpers';
import { GumGridGaps } from '../models';

/**
 * Generates grid gap utils
 */
export const generateGridGaps = () => {
  const parsedSpacings = {
    column: {},
    row: {},
  } as GumGridGaps;

  for (const key in spacing) {
    if (spacing.hasOwnProperty(key)) {
      const value = getVarValue(Prefix.spacing, key);

      parsedSpacings[`${key}`] = css`
        gap: ${value};
      `;

      parsedSpacings['column'][key] = css`
        column-gap: ${value};
      `;

      parsedSpacings['row'][key] = css`
        row-gap: ${value};
      `;
    }
  }

  return parsedSpacings;
};