import { space } from '../global/space';
import { borderWidths } from '../global/borders';
import { systemPalette } from '../global/colors';

interface DividerColors {
  default: string;
}

interface DividerSpace {
  largeMarginX: string;
  largeMarginY: string;
  mediumMarginX: string;
  mediumMarginY: string;
  smallMarginX: string;
  smallMarginY: string;
  xlargeMarginX: string;
  xlargeMarginY: string;
  xsmallMarginX: string;
  xsmallMarginY: string;
}

interface DividerBorderWidths {
  default: string;
}

const dividerColors: DividerColors = {
  default: systemPalette.defaultBorder,
};

const dividerBorderWidths: DividerBorderWidths = {
  default: `${borderWidths.base}px`,
};

const dividerSpace: DividerSpace = {
  xsmallMarginX: `0 ${space.xsmall}px`,
  smallMarginX: `0 ${space.small}px`,
  mediumMarginX: `0 ${space.medium}px`,
  largeMarginX: `0 ${space.large}px`,
  xlargeMarginX: `0 ${space.xlarge}px`,
  xsmallMarginY: `${space.xsmall}px 0`,
  smallMarginY: `${space.small}px 0`,
  mediumMarginY: `${space.medium}px 0`,
  largeMarginY: `${space.large}px 0`,
  xlargeMarginY: `${space.xlarge}px 0`,
};

export { dividerColors, dividerBorderWidths, dividerSpace };