import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import { Match } from "@/types/api";
import React from "react";
import { StyleSheet, View } from "react-native";

interface MatchCardProps {
  match: Match;
}

export function MatchCard({ match }: MatchCardProps) {
  const { theme } = useTheme();
  const isDark = theme === "dark";
  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
  const borderColor = isDark ? "#38383A" : "#E5E5EA";

  return (
    <View style={[styles.card, { backgroundColor: cardBg, borderColor }]}>
      <View style={styles.header}>
        <View
          style={[
            styles.leagueBadge,
            { backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
          ]}
        >
          <ThemedText style={styles.leagueText} numberOfLines={1}>
            {match.league}
          </ThemedText>
        </View>
        <ThemedText style={styles.timeText}>{match.time}</ThemedText>
      </View>

      <View style={styles.teamsContainer}>
        <ThemedText type="defaultSemiBold" style={styles.teamsText}>
          {match.home} vs {match.away}
        </ThemedText>
        <View style={styles.scoreContainer}>
          <ThemedText type="defaultSemiBold" style={styles.scoreText}>
            {match.scoreText}
          </ThemedText>
          <IconSymbol
            name={match.fav ? "star" : "star-outline"}
            size={20}
            color={match.fav ? "#FFD700" : iconColor}
          />
        </View>
      </View>

      {match.meta && (
        <ThemedText style={styles.metaText}>{match.meta}</ThemedText>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 12,
    marginBottom: 12,
    borderRadius: 12,
    borderWidth: 1,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  leagueBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
    marginRight: 8,
    maxWidth: "70%",
  },
  leagueText: {
    fontSize: 12,
    opacity: 0.7,
  },
  timeText: {
    fontSize: 12,
    opacity: 0.5,
  },
  teamsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 4,
  },
  teamsText: {
    fontSize: 16,
    flex: 1,
    marginRight: 8,
  },
  scoreContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
  scoreText: {
    fontSize: 16,
  },
  metaText: {
    fontSize: 12,
    opacity: 0.5,
    marginTop: 4,
  },
});