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

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

export type InvoiceEditorSection = "edit" | "preview";

type InvoiceEditorSectionTabsProps = {
  value: InvoiceEditorSection;
  onChange: (value: InvoiceEditorSection) => void;
  editLabel?: string;
  previewLabel?: string;
};

export function InvoiceEditorSectionTabs({
  value,
  onChange,
  editLabel = "Edit",
  previewLabel = "PDF preview",
}: InvoiceEditorSectionTabsProps) {
  return (
    <View>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.row}
      >
        <FilterChip
          label={editLabel}
          active={value === "edit"}
          onPress={() => onChange("edit")}
        />
        <FilterChip
          label={previewLabel}
          active={value === "preview"}
          onPress={() => onChange("preview")}
        />
      </ScrollView>
    </View>
  );
}

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