Gishen-Mob/components/prescription/RxImagePager.tsx

import { Image, Pressable, ScrollView, View } from "react-native";
import { Text } from "@/components/ui/Text";
import { colors, radii } from "@/lib/theme";

export function RxImagePager({
  uris,
  size = 96,
  onLongPress,
}: {
  uris: string[];
  size?: number;
  onLongPress?: (uri: string, index: number) => void;
}) {
  if (!uris.length) {
    return (
      <View
        style={{
          height: size,
          borderRadius: radii.md,
          backgroundColor: colors.surfaceAlt,
          alignItems: "center",
          justifyContent: "center",
          borderWidth: 1,
          borderColor: colors.line,
        }}
      >
        <Text variant="caption" color={colors.muted}>
          No pages attached
        </Text>
      </View>
    );
  }

  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
      {uris.map((uri, index) => (
        <Pressable key={`${uri}-${index}`} onLongPress={() => onLongPress?.(uri, index)}>
          <Image
            source={{ uri }}
            style={{
              width: size,
              height: size,
              borderRadius: radii.md,
              backgroundColor: colors.surfaceAlt,
              borderWidth: 1,
              borderColor: colors.line,
            }}
          />
          <Text
            variant="micro"
            color={colors.subtle}
            style={{ position: "absolute", left: 6, bottom: 6 }}
          >
            {index + 1}/{uris.length}
          </Text>
        </Pressable>
      ))}
    </ScrollView>
  );
}