import { useTheme } from "@/context/ThemeContext";
import { Image } from "expo-image";
import React from "react";

interface EmptyPlaceholderProps {
  type: "team" | "league" | "player" | "country";
  size?: number;
}

const imageMap: { [key: string]: any } = {
  team_light: require("@/assets/empty/team_light.svg"),
  team_dark: require("@/assets/empty/team_dark.svg"),
  league_light: require("@/assets/empty/league_light.svg"),
  league_dark: require("@/assets/empty/league_dark.svg"),
  player_light: require("@/assets/empty/player_light.svg"),
  player_dark: require("@/assets/empty/player_dark.svg"),
  country_light: require("@/assets/empty/country_light.svg"),
  country_dark: require("@/assets/empty/country_dark.svg"),
};

export function EmptyPlaceholder({ type, size = 64 }: EmptyPlaceholderProps) {
  const { theme } = useTheme();
  const isDark = theme === "dark";
  const suffix = isDark ? "_dark" : "_light";
  const imageKey = `${type}${suffix}`;

  return (
    <Image
      source={imageMap[imageKey] || imageMap.team_light}
      style={{ width: size, height: size }}
      contentFit="contain"
    />
  );
}