import type { GlobalTheme } from '../global';

const getTabsTheme = (theme: GlobalTheme) => {
  const colors = {
    active: theme.colors.onDefaultGlobalSurface,
    inactive: theme.colors.onDefaultGlobalSurface,
    activeBackground: theme.colors.decorativePrimarySurface,
    headerBottom: theme.colors.secondaryOutline,
    indicator: theme.colors.primary,
    text: theme.colors.onDefaultGlobalSurface,
    headerBackground: theme.colors.defaultGlobalSurface,
  };

  const space = {
    flatListHorizontalPadding: theme.space.small,
    itemHorizontalPadding: theme.space.small,
    itemVerticalPadding: theme.space.small,
    itemMargin: theme.space.smallMedium,
    outlineHorizontalPadding: theme.space.small,
    outlineVerticalPadding: theme.space.xsmall,
    tabIndicatorBottom: -theme.space.xxsmall,
  };

  const radii = {
    outline: theme.radii.xlarge,
  };

  const borderWidths = {
    headerBottom: theme.borderWidths.medium,
  };

  const sizes = {
    indicator: theme.sizes.xxsmall,
  };

  return { borderWidths, colors, space, radii, sizes };
};

export default getTabsTheme;