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

const getBottomNavigationTheme = (theme: GlobalTheme) => {
  const colors = {
    shadow: theme.colors.primary,
    background: theme.colors.defaultGlobalSurface,
    borderTop: theme.colors.secondaryOutline,
  };

  const borderWidths = {
    borderTop: theme.borderWidths.base,
  };

  const sizes = {
    // Android default
    height: theme.sizes['6xlarge'],
    // iOS-specific
    heightIOS: theme.sizes.xxxlarge,
  };

  const shadows = {
    wrapper: theme.shadows.medium,
  };

  const space = {
    titleMarginTop: theme.space.xxsmall,
    // iOS-specific
    contentPaddingTopIOS: theme.space.small,
  };

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

export default getBottomNavigationTheme;