beenvoice-app/components/invoices/InvoiceEditorFooter.tsx

import { Ionicons } from "@expo/vector-icons";
import { Pressable, StyleSheet, Text, View } from "react-native";

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

type SecondaryAction = {
  title: string;
  subtitle?: string;
  icon: keyof typeof Ionicons.glyphMap;
  onPress: () => void;
  loading?: boolean;
  disabled?: boolean;
};

type InvoiceEditorFooterProps = {
  primaryTitle: string;
  onPrimary: () => void;
  primaryLoading?: boolean;
  primaryDisabled?: boolean;
  secondary?: SecondaryAction;
};

export function InvoiceEditorFooter({
  primaryTitle,
  onPrimary,
  primaryLoading,
  primaryDisabled,
  secondary,
}: InvoiceEditorFooterProps) {
  const { colors } = useAppTheme();

  return (
    <View
      style={[
        styles.card,
        {
          borderColor: colors.border,
          backgroundColor: colors.cardGlass,
        },
      ]}
    >
      <Button
        title={primaryTitle}
        loading={primaryLoading}
        disabled={primaryDisabled}
        onPress={onPrimary}
      />

      {secondary ? (
        <>
          <View style={[styles.divider, { backgroundColor: colors.border }]} />
          <Pressable
            accessibilityRole="button"
            disabled={secondary.disabled || secondary.loading}
            onPress={secondary.onPress}
            style={({ pressed }) => [
              styles.secondaryRow,
              (pressed || secondary.loading) && styles.secondaryPressed,
              (secondary.disabled || secondary.loading) && styles.secondaryDisabled,
            ]}
          >
            <View style={[styles.iconWrap, { backgroundColor: colors.muted }]}>
              <Ionicons name={secondary.icon} size={20} color={colors.foreground} />
            </View>
            <View style={styles.secondaryCopy}>
              <Text style={[styles.secondaryTitle, { color: colors.foreground }]}>
                {secondary.title}
              </Text>
              {secondary.subtitle ? (
                <Text style={[styles.secondarySubtitle, { color: colors.mutedForeground }]}>
                  {secondary.subtitle}
                </Text>
              ) : null}
            </View>
            <Ionicons name="chevron-forward" size={18} color={colors.mutedForeground} />
          </Pressable>
        </>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderWidth: 1,
    borderRadius: radii.lg,
    padding: spacing.md,
    gap: spacing.sm,
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    marginVertical: spacing.xs,
  },
  secondaryRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.sm,
    paddingVertical: spacing.xs,
  },
  secondaryPressed: {
    opacity: 0.75,
  },
  secondaryDisabled: {
    opacity: 0.45,
  },
  iconWrap: {
    width: 40,
    height: 40,
    borderRadius: radii.md,
    alignItems: "center",
    justifyContent: "center",
  },
  secondaryCopy: {
    flex: 1,
    gap: 2,
    minWidth: 0,
  },
  secondaryTitle: {
    fontFamily: fonts.bodySemiBold,
    fontSize: 15,
  },
  secondarySubtitle: {
    fontFamily: fonts.body,
    fontSize: 13,
    lineHeight: 18,
  },
});