import { space } from '../global/space';
import { radii } from '../global/borders';
import { sizes } from '../global/sizes';
import { systemPalette } from '../global/colors';
import { fontSizes } from '../global/typography';

interface CarouselColors {
  dark: string;
  light: string;
}

interface CarouselSizes {
  active: string;
  basic: string;
  default: string;
}

interface CarouselSpace {
  default: string;
  listColumnMargin: string;
  listRowMargin: string;
  navigationButtonColumnMargin: string;
}

interface CarouselRadiiSizes {
  default: string;
}

interface CarouselFontSizes {
  navigationButton: string;
}

const carouselColors: CarouselColors = {
  light: systemPalette.defaultLightBackground,
  dark: systemPalette.neutralBackground,
};

const carouselSpace: CarouselSpace = {
  default: `${space.large}px`,
  listRowMargin: `0 ${space.xxsmall}px`,
  listColumnMargin: `${space.xsmall}px ${space.xxsmall}px`,
  navigationButtonColumnMargin: `${space.large / 2}px`,
};

const carouselSizes: CarouselSizes = {
  basic: `${sizes.xsmall}px`,
  default: `${sizes.medium}px`,
  active: `${sizes.large}px`,
};

const carouselRadii: CarouselRadiiSizes = {
  default: `${radii.base}px`,
};

const carouselFontSizes: CarouselFontSizes = {
  navigationButton: `${fontSizes.xxxlarge}px`,
};

export {
  carouselSpace,
  carouselSizes,
  carouselColors,
  carouselRadii,
  carouselFontSizes,
};