HausApp/apps/native/src/components/ui/ModalHeader.tsx

import { ActivityIndicator, Pressable, Text, View } from "react-native";
import { TAB_COLORS } from "@/src/constants/colors";

type Props = {
  title: string;
  onClose: () => void;
  closeLabel: string;
  onSave?: () => void;
  saveLabel?: string;
  saveDisabled?: boolean;
  saveLoading?: boolean;
  saveColor?: string;
};

export function ModalHeader({
  title,
  onClose,
  closeLabel,
  onSave,
  saveLabel,
  saveDisabled = false,
  saveLoading = false,
  saveColor = TAB_COLORS.household,
}: Props) {
  return (
    <View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-100">
      <Pressable onPress={onClose}>
        <Text className="text-base text-gray-500">{closeLabel}</Text>
      </Pressable>
      <Text className="text-base font-semibold text-gray-900">{title}</Text>
      {onSave ? (
        <Pressable onPress={onSave} disabled={saveLoading || saveDisabled}>
          {saveLoading ? (
            <ActivityIndicator size="small" color={saveColor} />
          ) : (
            <Text
              className="text-base font-semibold"
              style={{ color: saveDisabled ? "#9ca3af" : saveColor }}
            >
              {saveLabel}
            </Text>
          )}
        </Pressable>
      ) : (
        <View style={{ width: 40 }} />
      )}
    </View>
  );
}