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

interface LiveLeagueInfoProps {
  match: LiveScoreMatch;
}

export function LiveLeagueInfo({ match }: LiveLeagueInfoProps) {
  // 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.league_logo ? (
          <Image
            source={{ uri: match.league_logo }}
            style={styles.leagueLogo}
          />
        ) : (
          <View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
            <IconSymbol name="trophy-outline" size={14} color="#AAA" />
          </View>
        )}
        <ThemedText style={[styles.leagueName, { color: textColor }]}>
          {match.league_name}
        </ThemedText>
      </View>
      <View style={styles.right}>
        <ThemedText style={styles.roundText}>
          {match.league_round || ""}
        </ThemedText>
        <IconSymbol name="chevron-forward" size={16} color="#888" />
      </View>
    </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",
  },
  right: {
    flexDirection: "row",
    alignItems: "center",
  },
  roundText: {
    fontSize: 12,
    color: "#888",
    marginRight: 8,
  },
});