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

const getCarouselTheme = (theme: GlobalTheme) => {
  const space = {
    headingMarginBottom: theme.space.medium,
    footerPaddingHorizontal: theme.space.large,
    footerPaddingVertical: theme.space.medium,
    footerMarginBottom: theme.space.large,
    pageControlPaddingVertical: theme.space.small,
    pageControlWrapperHeight: scale(48),
  };

  const fontSizes = {
    heading: theme.fontSizes['xxxxxlarge'],
  };

  const fonts = {
    heading: theme.fonts.playful.semiBold,
  };

  const lineHeights = {
    heading: theme.lineHeights['6xlarge'],
  };

  return { space, fonts, fontSizes, lineHeights };
};

type GetCarouselThemeReturnType = ReturnType<typeof getCarouselTheme>;
export interface CarouselThemeType extends GetCarouselThemeReturnType {
  /**
   * @deprecated will be removed in v9
   * */
  fonts: GetCarouselThemeReturnType['fonts'];
  /**
   * @deprecated will be removed in v9
   * */
  fontSizes: GetCarouselThemeReturnType['fontSizes'];
  /**
   * @deprecated will be removed in v9
   * */
  lineHeights: GetCarouselThemeReturnType['lineHeights'];
}
export default getCarouselTheme;