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

interface BreadcrumbColors {
  item: string;
  itemActive: string;
}

interface BreadcrumbSpace {
  backIconMarginRight: string;
  separatorMargin: string;
}

interface BreadcrumbFontsizes {
  item: string;
  itemActive: string;
}

interface BreadcrumbLineHeights {
  item: string;
  itemActive: string;
}

interface BreadcrumbFontWeights {
  item: number;
  itemActive: number;
}

const breadcrumbColors: BreadcrumbColors = {
  item: systemPalette.subduedText,
  itemActive: systemPalette.text,
};

const breadcrumbSpace: BreadcrumbSpace = {
  backIconMarginRight: `${space.xsmall}px`,
  separatorMargin: `auto ${space.small}px`,
};

const breadcrumbFontSizes: BreadcrumbFontsizes = {
  item: `${fontSizes.medium}px`,
  itemActive: `${fontSizes.medium}px`,
};

const breadcrumbFontWeights: BreadcrumbFontWeights = {
  item: fontWeights.regular,
  itemActive: fontWeights.semiBold,
};

const breadcrumbLineHeights: BreadcrumbLineHeights = {
  item: `${lineHeights.medium}px`,
  itemActive: `${lineHeights.medium}px`,
};

export {
  breadcrumbColors,
  breadcrumbSpace,
  breadcrumbFontSizes,
  breadcrumbFontWeights,
  breadcrumbLineHeights,
};