import { responsiveFontSize } from "../actions/responsiveSizes.js";
import { Palette } from "../styles";

export const fontTypeList = {
  default: {
    fontFamily: "OpenSansRegular",
    fontSize: responsiveFontSize(1.5),
    lineHeight: 20,
  },
  section: {
    fontFamily: "OpenSansRegular",
    fontSize: responsiveFontSize(1.8),
    lineHeight: 20,
  },
  navigationTitle: {
    fontFamily: "NewYorkSemibold",
    fontSize: responsiveFontSize(2.5),
  },
  title: {
    fontFamily: "NewYorkSemibold",
    fontSize: responsiveFontSize(3),
  },
  mainTitle: {
    fontFamily: "NewYorkSemibold",
    fontSize: responsiveFontSize(4.5),
  },
  megaTitle: {
    fontFamily: "NewYorkSemibold",
    fontSize: responsiveFontSize(5),
  },
};

export const FONT_FAMILY = {
  InterRegular: "InterRegular",
  InterMedium: "InterMedium",
  InterSemiBold: "InterSemiBold",
  InterBold: "InterBold",
};

const Fonts = ({
  type = "default",
  fontSize = null,
  fontWeight = "normal",
  color = Palette.white,
  style = {},
} = {}) => ({
  ...fontTypeList[type],
  ...(fontSize && { fontSize: responsiveFontSize(fontSize) }),
  fontWeight,
  color,
  ...style,
});

export default Fonts;