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

interface OtherInfoCardProps {
  match: LiveScoreMatch;
  isDark: boolean;
}

export function OtherInfoCard({ match, isDark }: OtherInfoCardProps) {
  const { t } = useTranslation();
  const iconColor = isDark ? "#888" : "#999";

  // 模拟气象数据，因为当前 API 响应中未直接包含这些字段
  const weather = {
    temp: "25°C",
    wind: "3.4m/s",
    humidity: "31%",
  };

  return (
    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
      <ThemedText style={styles.title}>
        {t("detail.other_info.title")}
      </ThemedText>

      <View style={styles.infoRow}>
        <IconSymbol name="thermometer-outline" size={24} color={iconColor} />
        <ThemedText style={styles.infoText}>{weather.temp}</ThemedText>
      </View>

      <View style={styles.infoRow}>
        <IconSymbol name="leaf-outline" size={24} color={iconColor} />
        <ThemedText style={styles.infoText}>{weather.wind}</ThemedText>
      </View>

      <View style={styles.infoRow}>
        <IconSymbol name="water-outline" size={24} color={iconColor} />
        <ThemedText style={styles.infoText}>{weather.humidity}</ThemedText>
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    borderRadius: 20,
    backgroundColor: "#FFF",
    padding: 20,
    marginBottom: 20,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 10,
    elevation: 2,
  },
  darkContainer: {
    backgroundColor: "#1E1E20",
    shadowOpacity: 0,
    elevation: 0,
  },
  title: {
    fontSize: 16,
    color: "#666",
    marginBottom: 20,
  },
  infoRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 15,
    marginBottom: 16,
  },
  infoText: {
    fontSize: 18,
    fontWeight: "500",
  },
});