import { ThemedText } from "@/components/themed-text";
import { MatchDetailData } from "@/types/api";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";

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

export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
  const { t } = useTranslation();
  const { match } = data;
  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const labelColor = isDark ? "#999" : "#666";
  const valueColor = isDark ? "#FFF" : "#000";

  const infoItems = [
    { label: t("detail.info_card.country"), value: match.countryName },
    { label: t("detail.info_card.league"), value: match.leagueName },
    { label: t("detail.info_card.stage"), value: match.stageName },
    { label: t("detail.info_card.stadium"), value: match.eventStadium },
    { label: t("detail.info_card.referee"), value: match.eventReferee },
    { label: t("detail.info_card.date"), value: `${match.eventDate} ${match.eventTime}` },
  ].filter((item) => item.value && item.value.trim() !== "");

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      <ThemedText style={styles.title}>
        {t("detail.info_card.title")}
      </ThemedText>

      <View style={styles.content}>
        {infoItems.map((item, index) => (
          <View key={index} style={styles.infoRow}>
            <ThemedText style={[styles.label, { color: labelColor }]}>
              {item.label}
            </ThemedText>
            <ThemedText style={[styles.value, { color: valueColor }]} numberOfLines={2}>
              {item.value}
            </ThemedText>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    marginTop: 0,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  title: {
    fontSize: 14,
    fontWeight: "600",
    color: "#666",
    marginBottom: 16,
  },
  content: {
    gap: 12,
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    gap: 12,
  },
  label: {
    fontSize: 13,
    fontWeight: "500",
    opacity: 0.7,
    minWidth: 80,
  },
  value: {
    fontSize: 13,
    fontWeight: "500",
    flex: 1,
    textAlign: "right",
  },
});