import { css } from '@emotion/react';
import { GumWrapperMixin } from '../models';

/**
 * Generates CSS fragment containing max-width, alignment and side padding based on options
 * @param width wrapper max width
 * @param align wrapper alignment
 * @param sidePadding left and right padding (equal value)
 */
export const wrapper: GumWrapperMixin = (width, align, sidePadding) => {
  const maxWidth = css`
    max-width: ${width}px;
  `;

  const padding = sidePadding
    ? css`
        padding-left: ${sidePadding};
        padding-right: ${sidePadding};
      `
    : '';

  const alignment =
    align === 'left'
      ? ''
      : align === 'right'
      ? css`
          margin-right: 0;
          margin-left: auto;
        `
      : css`
          margin-left: auto;
          margin-right: auto;
        `;

  return css`
    ${maxWidth};
    ${alignment};
    ${padding};
  `;
};