empty placeholder

components/empty-placeholder.tsx

@@ -0,0 +1,34 @@
+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"
+    />
+  );
+}