import { css } from '@emotion/react';
import { typography } from '../../../../src/style/variables';

import { Prefix } from '../constants';
import { getFluidValue, getVarValue } from '../helpers';
import { GumTypescaleMixin } from '../models';

/**
 * Generates a static or fluid font-size CSS variable
 * @param size main font size or a min fluid font size if additionalSize is provided.
 * @param additionalSize max fluid font size.
 */
export const fontSize: GumTypescaleMixin = (size, additionalSize) => {
  if (!typography[size]) return css``;

  if (additionalSize) {
    return getFluidValue(Prefix.fontSize, size, additionalSize);
  }

  return css`
    font-size: ${getVarValue(Prefix.fontSize, String(size))};
  `;
};

/**
 * Generates a static or fluid line-height CSS variable
 * @param size main line height or a min fluid line height if additionalSize is provided.
 * @param additionalSize max line height size.
 */
export const lineHeight: GumTypescaleMixin = (size, additionalSize?) => {
  if (!typography[size]) return css``;

  if (additionalSize) {
    return getFluidValue(Prefix.lineHeight, size, additionalSize);
  }

  return css`
    line-height: ${getVarValue(Prefix.lineHeight, size)};
  `;
};