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

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

import { FilterChip } from "@/components/FilterChip";
import { spacing } from "@/constants/theme";

export type InvoiceEditorSection = "setup" | "lines" | "preview";
export type InvoiceViewSection = "details" | "preview";

type InvoiceEditorSectionTabsProps =
  | {
      mode?: "edit";
      value: InvoiceEditorSection;
      onChange: (value: InvoiceEditorSection) => void;
    }
  | {
      mode: "view";
      value: InvoiceViewSection;
      onChange: (value: InvoiceViewSection) => void;
    };

export function InvoiceEditorSectionTabs(props: InvoiceEditorSectionTabsProps) {
  const tabs =
    props.mode === "view"
      ? [
          { id: "details" as const, label: "Details" },
          { id: "preview" as const, label: "PDF" },
        ]
      : [
          { id: "setup" as const, label: "Setup" },
          { id: "lines" as const, label: "Line items" },
          { id: "preview" as const, label: "PDF preview" },
        ];

  return (
    <View>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.row}
      >
        {tabs.map((tab) => (
          <FilterChip
            key={tab.id}
            label={tab.label}
            active={props.value === tab.id}
            onPress={() => props.onChange(tab.id as never)}
          />
        ))}
      </ScrollView>
    </View>
  );
}

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