beenvoice-app/components/invoices/InvoiceTotals.tsx

import { StyleSheet, Text, View } from "react-native";

import { fonts, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";

type InvoiceTotalsProps = {
  subtotal: string;
  taxLabel?: string;
  taxAmount?: string;
  total: string;
};

export function InvoiceTotals({
  subtotal,
  taxLabel,
  taxAmount,
  total,
}: InvoiceTotalsProps) {
  const { colors } = useAppTheme();

  return (
    <View style={[styles.totals, { borderTopColor: colors.border }]}>
      <TotalRow label="Subtotal" value={subtotal} />
      {taxLabel && taxAmount ? <TotalRow label={taxLabel} value={taxAmount} /> : null}
      <TotalRow label="Total" value={total} bold />
    </View>
  );
}

function TotalRow({
  label,
  value,
  bold,
}: {
  label: string;
  value: string;
  bold?: boolean;
}) {
  const { colors } = useAppTheme();

  return (
    <View style={styles.row}>
      <Text
        style={[
          styles.label,
          { color: colors.mutedForeground },
          bold && styles.bold,
          bold && { color: colors.foreground },
        ]}
      >
        {label}
      </Text>
      <Text
        style={[
          styles.value,
          { color: colors.foreground },
          bold && styles.bold,
        ]}
      >
        {value}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  totals: {
    marginTop: spacing.md,
    paddingTop: spacing.md,
    borderTopWidth: StyleSheet.hairlineWidth,
    gap: spacing.xs,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  label: {
    fontFamily: fonts.body,
    fontSize: 14,
  },
  value: {
    fontFamily: fonts.bodyMedium,
    fontSize: 14,
  },
  bold: {
    fontFamily: fonts.bodySemiBold,
    fontSize: 15,
  },
});