import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlashList } from '@shopify/flash-list';

// High-Performance List Virtualization (Recycles native views for 120 FPS scroll!)
interface OrderItem {
  id: string;
  amount: number;
  customer: string;
}

export function OrderFeed({ orders }: { orders: OrderItem[] }) {
  return (
    <View style={styles.container}>
      <FlashList
        data={orders}
        estimatedItemSize={72} // Mandatory for optimal memory chunk pre-allocation
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <Text style={styles.title}>{item.customer}</Text>
            <Text style={styles.price}>${item.amount.toFixed(2)}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#F8FAFD' },
  card: { padding: 16, borderBottomWidth: 1, borderColor: '#E1E3E1', flexDirection: 'row', justifyContent: 'space-between' },
  title: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 16, fontWeight: '700', color: '#34A853' }
});

import React from 'react';
import { StyleSheet } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export function DraggableCard() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  // Pan Gesture executing directly on the Native UI Thread Worklet!
  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      'worklet';
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    })
    .onEnd(() => {
      'worklet';
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value }
    ]
  }));

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  box: { width: 120, height: 120, backgroundColor: '#4285F4', borderRadius: 24 }
});