physical-expo/components/match-detail/score-header.tsx

import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { MatchDetailData } from "@/types/api";
import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from "expo-router";
import React from "react";
import { useTranslation } from "react-i18next";
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";

interface ScoreHeaderProps {
  data: MatchDetailData;
  isDark: boolean;
  topInset: number;
}

export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
  const router = useRouter();
  const { t } = useTranslation();
  const { match } = data;

  return (
    <LinearGradient
      colors={["#1A2138", "#2A3C5B"]}
      style={[styles.container, { paddingTop: Math.max(topInset, 20) }]}
    >
      {/* Top Bar */}
      <View style={styles.topBar}>
        <View style={styles.leftContainer}>
          <TouchableOpacity
            onPress={() => router.back()}
            style={styles.iconBtn}
          >
            <IconSymbol name="chevron-back" size={24} color="#FFF" />
          </TouchableOpacity>
        </View>

        <View style={styles.statusContainer}>
          <ThemedText style={styles.statusText}>
            {match.eventStatus || t("detail.pending")}
          </ThemedText>
        </View>

        <View style={styles.rightContainer}>
          <TouchableOpacity style={styles.iconBtn}>
            <IconSymbol name="notifications-outline" size={22} color="#FFF" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.iconBtn}>
            <IconSymbol name="star-outline" size={22} color="#FFF" />
          </TouchableOpacity>
        </View>
      </View>

      {/* Score Section */}
      <View style={styles.scoreRow}>
        <View style={styles.teamInfo}>
          <View style={styles.logoContainer}>
            <Image
              source={{ uri: match.homeTeamLogo }}
              style={styles.teamLogo}
            />
          </View>
          <ThemedText style={styles.teamName} numberOfLines={2}>
            {match.eventHomeTeam}
          </ThemedText>
        </View>

        <View style={styles.centerScore}>
          <View style={styles.scoreBox}>
            <ThemedText style={styles.scoreValue}>
              {match.eventFinalResult && match.eventFinalResult !== ""
                ? match.eventFinalResult
                : "0 - 0"}
            </ThemedText>
          </View>
          <TouchableOpacity style={styles.fieldBtn}>
            <IconSymbol name="football-outline" size={16} color="#FFF" />
          </TouchableOpacity>
        </View>

        <View style={styles.teamInfo}>
          <View style={styles.logoContainer}>
            <Image
              source={{ uri: match.awayTeamLogo }}
              style={styles.teamLogo}
            />
          </View>
          <ThemedText style={styles.teamName} numberOfLines={2}>
            {match.eventAwayTeam}
          </ThemedText>
        </View>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingBottom: 30,
    paddingHorizontal: 16,
  },
  topBar: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    minHeight: 40,
  },
  leftContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  statusContainer: {
    flex: 2,
    justifyContent: "center",
    alignItems: "center",
  },
  rightContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    gap: 12,
  },
  statusText: {
    color: "#FFF",
    fontSize: 16,
    fontWeight: "600",
    opacity: 0.8,
  },
  rightIcons: {
    flexDirection: "row",
    gap: 12,
  },
  iconBtn: {
    width: 36,
    height: 36,
    justifyContent: "center",
    alignItems: "center",
  },
  scoreRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 10,
  },
  teamInfo: {
    flex: 1.2,
    alignItems: "center",
  },
  logoContainer: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: "rgba(255,255,255,0.1)",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    overflow: "hidden",
  },
  teamLogo: {
    width: 48,
    height: 48,
    resizeMode: "contain",
  },
  teamName: {
    color: "#FFF",
    fontSize: 14,
    fontWeight: "600",
    textAlign: "center",
  },
  centerScore: {
    flex: 1,
    alignItems: "center",
  },
  scoreBox: {
    backgroundColor: "#FFF",
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginBottom: 12,
  },
  scoreValue: {
    color: "#000",
    fontSize: 32,
    fontWeight: "bold",
    letterSpacing: 2,
  },
  fieldBtn: {
    backgroundColor: "#0055FF",
    width: 80,
    height: 28,
    borderRadius: 14,
    justifyContent: "center",
    alignItems: "center",
  },
});