beenvoice/apps/mobile/components/invoices/InvoiceViewChips.tsx

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

import { FilterChip } from "@/components/FilterChip";
import { spacing } from "@/constants/theme";
import type { InvoiceStatus } from "@/lib/invoice-status";

export type InvoiceViewSection = "details" | "preview";

type InvoiceViewChipsProps = {
  section: InvoiceViewSection;
  onSectionChange: (section: InvoiceViewSection) => void;
  status: InvoiceStatus;
  onEdit: () => void;
  onSend: () => void;
};

export function InvoiceViewChips({
  section,
  onSectionChange,
  status,
  onEdit,
  onSend,
}: InvoiceViewChipsProps) {
  const sendLabel = status === "draft" ? "Send" : "Resend";

  return (
    <View>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.row}
      >
        <FilterChip
          label="Details"
          active={section === "details"}
          onPress={() => onSectionChange("details")}
        />
        <FilterChip label="Edit" onPress={onEdit} />
        {status !== "paid" ? (
          <FilterChip label={sendLabel} onPress={onSend} />
        ) : null}
        <FilterChip
          label="View PDF"
          active={section === "preview"}
          onPress={() => onSectionChange("preview")}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    gap: spacing.sm,
    paddingVertical: spacing.xs,
  },
});