import { ActivityIndicator, Text, View } from "react-native";
import { useTranslation } from "react-i18next";
import { formatEur } from "@/src/utils/format";

type Props = {
  income: number | undefined;
  expense: number | undefined;
  balance: number | undefined;
  isLoading: boolean;
  accentColor?: string;
};

export function MonthSummaryHeader({ income, expense, balance, isLoading, accentColor }: Props) {
  const { t } = useTranslation();
  if (isLoading) {
    return (
      <View className="bg-white mx-4 mt-3 rounded-2xl p-4 items-center" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
        <ActivityIndicator size="small" color="#9ca3af" />
      </View>
    );
  }

  const balancePositive = (balance ?? 0) >= 0;
  const balanceColor = accentColor ?? (balancePositive ? "#16a34a" : "#dc2626");

  return (
    <View
      className="bg-white mx-4 mt-3 mb-1 rounded-2xl px-4 py-3 flex-row"
      style={{ borderWidth: 1, borderColor: "#f3f4f6" }}
    >
      <View className="flex-1 items-center">
        <Text className="text-xs text-gray-400 mb-1">{t('household.income')}</Text>
        <Text className="text-sm font-semibold text-green-600">
          {income !== undefined ? formatEur(income) : "—"}
        </Text>
      </View>
      <View className="w-px bg-gray-100 mx-1" />
      <View className="flex-1 items-center">
        <Text className="text-xs text-gray-400 mb-1">{t('household.expenses')}</Text>
        <Text className="text-sm font-semibold text-red-500">
          {expense !== undefined ? formatEur(expense) : "—"}
        </Text>
      </View>
      <View className="w-px bg-gray-100 mx-1" />
      <View className="flex-1 items-center">
        <Text className="text-xs text-gray-400 mb-1">{t('household.balance')}</Text>
        <Text
          className="text-sm font-semibold"
          style={{ color: balanceColor }}
        >
          {balance !== undefined ? formatEur(balance) : "—"}
        </Text>
      </View>
    </View>
  );
}
