import { space } from '../global/space';
import { fontSizes, fontWeights, lineHeights } from '../global/typography';
import { systemPalette } from '../global/colors';

interface ResultColors {
  default: string;
}

interface ResultSpace {
  extraMargin: string;
  titleMargin: string;
}

interface ResultFontWeights {
  subTitle: number;
  title: number;
}

interface ResultFontSizes {
  icon: string;
  subTitle: string;
  title: string;
}

interface ResultLineHeights {
  subTitle: string;
  title: string;
}

const resultColors: ResultColors = {
  default: systemPalette.text,
};

const resultSpace: ResultSpace = {
  titleMargin: `${space.large}px 0`,
  extraMargin: `${space.xlarge}px`,
};

const resultFontWeights: ResultFontWeights = {
  title: fontWeights.semiBold,
  subTitle: fontWeights.regular,
};

const resultFontSizes: ResultFontSizes = {
  icon: `${fontSizes.xxxxxlarge * 2}px`,
  title: `${fontSizes.xxxlarge}px`,
  subTitle: `${fontSizes.medium}px`,
};

const resultLineHeights: ResultLineHeights = {
  title: `${lineHeights.xxxlarge}px`,
  subTitle: `${lineHeights.medium}px`,
};

export {
  resultColors,
  resultSpace,
  resultFontWeights,
  resultFontSizes,
  resultLineHeights,
};