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;
  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const borderColor = isDark ? "#2C2C2E" : "#EEE";

  return (
    <TouchableOpacity
      style={[
        styles.container,
        { backgroundColor: bgColor, borderBottomColor: borderColor },
      ]}
      activeOpacity={0.7}
    >
      <View style={styles.left}>
        {match.leagueLogo ? (
          <Image source={{ uri: match.leagueLogo }} style={styles.leagueLogo} />
        ) : (
          <View
            style={[
              styles.fallbackLogo,
              { backgroundColor: isDark ? "#333" : "#F0F0F0" },
            ]}
          >
            <IconSymbol
              name="trophy-outline"
              size={14}
              color={isDark ? "#AAA" : "#888"}
            />
          </View>
        )}
        <ThemedText style={styles.leagueName}>{match.leagueName}</ThemedText>
      </View>
      <IconSymbol
        name="chevron-forward"
        size={16}
        color={isDark ? "#666" : "#CCC"}
      />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 12,
    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",
  },
});