import { EmptyPlaceholder } from "@/components/empty-placeholder";
import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { MatchDetailData } from "@/types/api";
import React from "react";
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";

interface LeagueInfoProps {
  data: MatchDetailData;
  isDark: boolean;
}

export function LeagueInfo({ data, isDark }: LeagueInfoProps) {
  const { match } = data;
  // Force dark style for this component to match the header design language
  const bgColor = "#121212";
  const borderColor = "rgba(255,255,255,0.1)";
  const textColor = "#FFF";

  return (
    <TouchableOpacity
      style={[
        styles.container,
        { backgroundColor: bgColor, borderBottomColor: borderColor },
      ]}
      activeOpacity={0.7}
    >
      <View style={styles.left}>
        {match.leagueLogo && match.leagueLogo.trim() !== "" && !match.leagueLogo.includes("placehold") ? (
          <Image source={{ uri: match.leagueLogo }} style={styles.leagueLogo} />
        ) : (
          <EmptyPlaceholder type="league" size={24} />
        )}
        <ThemedText style={[styles.leagueName, { color: textColor }]}>
          {match.leagueName}
        </ThemedText>
      </View>
      <IconSymbol name="chevron-forward" size={16} color="#888" />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
  },
  left: {
    flexDirection: "row",
    alignItems: "center",
  },
  leagueLogo: {
    width: 24,
    height: 24,
    resizeMode: "contain",
    marginRight: 8,
  },
  fallbackLogo: {
    width: 24,
    height: 24,
    borderRadius: 12,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 8,
  },
  leagueName: {
    fontSize: 14,
    fontWeight: "500",
  },
});
