import {
  Inter_300Light,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
} from "@expo-google-fonts/inter";
import { colors } from "./colors";

export const fontAssets = {
  Inter_300Light,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
};

export const typography = {
  // Font family tokens
  light: "Inter_300Light",
  regular: "Inter_400Regular",
  medium: "Inter_500Medium",
  semibold: "Inter_600SemiBold",
  bold: "Inter_700Bold",

  // Font sizes
  sizes: {
    h1: 26,
    h2: 20,
    h3: 18,
    body: 15,
    bodySmall: 13,
    label: 16,
    caption: 12,
    button: 20,
    title: 42,
    subtitle: 18,
  },

  // Predefined text styles
  h1: {
    fontSize: 26,
    fontFamily: "Inter_600SemiBold",
    color: colors.brandOrange1,
    letterSpacing: 0.5,
  },

  h2: {
    fontSize: 20,
    fontFamily: "Inter_600SemiBold",
    color: colors.brandOrange1,
  },

  h3: {
    fontSize: 18,
    fontFamily: "Inter_600SemiBold",
    color: colors.textDark,
  },

  body: {
    fontSize: 15,
    fontFamily: "Inter_400Regular",
    color: colors.textDark,
  },

  bodySmall: {
    fontSize: 13,
    fontFamily: "Inter_400Regular",
    color: colors.textDark,
  },

  label: {
    fontSize: 16,
    fontFamily: "Inter_600SemiBold",
    color: colors.textDark,
  },

  caption: {
    fontSize: 12,
    fontFamily: "Inter_400Regular",
    color: colors.gray500,
  },

  // Legacy styles (kept for backwards compatibility)
  title: {
    fontSize: 42,
    fontFamily: "Inter_600SemiBold",
    color: colors.brandOrange1,
    letterSpacing: 1.5,
    textAlign: "center" as const,
    textTransform: "uppercase" as const,
    marginTop: 10,
    marginBottom: 6,
  },

  subtitle: {
    fontSize: 18,
    fontFamily: "Inter_400Regular", // Changed from Poppins to Inter
    color: colors.textDark,
    marginBottom: 60,
    textAlign: "center" as const,
  },
};
