const COLORS = {
  from: {
    purple: "from-purple-500",
    pink: "from-pink-500",
    gray: "from-gray-700",
    blue: "from-blue-500",
    green: "from-green-500",
    yellow: "from-yellow-500",
    indigo: "from-indigo-500",
  },
  to: {
    purple: "to-purple-500",
    pink: "to-pink-500",
    gray: "to-gray-700",
    blue: "to-blue-500",
    green: "to-green-500",
    yellow: "to-yellow-500",
    indigo: "to-indigo-500",
  },
};

export const fetchSpaceRandomly = async () => {
  const randomPage = Math.floor(Math.random() * 100) + 1;
  const url = `https://huggingface.co/spaces-json?p=${randomPage}&runtime.stage=RUNNING&sort=trending`;
  const response = await fetch(url);
  const json = await response.json();
  const spaces = json?.spaces;

  if (!spaces) {
    return null;
  }

  const randomIndex = Math.floor(Math.random() * spaces.length);

  const space = {
    ...spaces[randomIndex],
    colorFrom: COLORS.from[spaces[randomIndex].colorFrom as keyof typeof COLORS.from] || COLORS.from.purple,
    colorTo: COLORS.to[spaces[randomIndex].colorTo as keyof typeof COLORS.from] || COLORS.to.pink,
  }
  return space;
}