/**
 * ProductCard Component
 * 
 * AI Context: Generated for product catalog display
 * Business Rules: 
 * - Shows price only for authenticated users
 * - Handles both physical and digital products
 * - Supports accessibility requirements
 * 
 * Design Decisions:
 * - Using TouchableOpacity for native feel
 * - Memoized for performance in FlatList
 * - Error boundaries for image loading failures
 * 
 * Dependencies:
 * - @core/shared/styles for theming
 * - @/core/domains/products for data fetching
 * - @/ui/foundation for base components
 */
export const ProductCard = React.memo<ProductCardProps>(({ product }) => {
  // Implementation with proper error handling
  // and accessibility support
});

// AI Reasoning: Need to handle async state transitions while preventing race conditions
// Decision: Use ref to track latest request and ignore stale responses
// Alternative considered: Cancel previous requests, but ref approach is more performant
export function useAsyncData<T>(asyncFn: () => Promise<T>) {
  const [state, setState] = useState<AsyncState<T>>({ status: 'idle' });
  const latestRequestRef = useRef<symbol>();
  
  const execute = useCallback(async () => {
    const requestId = Symbol();
    latestRequestRef.current = requestId;
    
    setState({ status: 'loading' });
    
    try {
      const result = await asyncFn();
      
      // Only update if this is still the latest request
      if (latestRequestRef.current === requestId) {
        setState({ status: 'success', data: result });
      }
    } catch (error) {
      if (latestRequestRef.current === requestId) {
        setState({ status: 'error', error });
      }
    }
  }, [asyncFn]);
  
  return { ...state, execute };
}

❌ WRONG (Common AI mistakes):
features/products/api/         → Should be: core/domains/products/
features/home/components/Button/ → Should be: ui/foundation/Button/
ui/ProductCard/               → Should be: ui/business/ProductCard/
core/shared/utils/cartTotal.ts → Should be: features/cart/utils/

✅ CORRECT Architecture:
core/domains/[entity]/        → Business logic and data access
ui/foundation/[component]/    → Atomic UI components
ui/patterns/[pattern]/        → Composed UI patterns
ui/business/[component]/      → Domain-aware UI (3+ features)
features/[feature]/           → Feature-specific code

// 1. Imports (canonical order)
import React, { useState, useCallback, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '@core/shared/styles';
import { Button } from '@/ui/foundation/Button';
 
// 2. Types/Interfaces
interface ComponentProps {
  title: string;
  onPress: () => void;
  disabled?: boolean;
}
 
// 3. Main Component (function declaration)
export function ComponentName(props: ComponentProps) {
  // 4. Hooks
  const theme = useTheme();
  const [isLoading, setIsLoading] = useState(false);
  
  // 5. Derived state
  const isDisabled = isLoading || props.disabled || !props.title;
  
  // 6. Effects
  useEffect(() => {
    // Side effects here
  }, []);
  
  // 7. Handlers (memoized)
  const handlePress = useCallback(() => {
    if (isDisabled) return;
    setIsLoading(true);
    
    try {
      props.onPress();
    } finally {
      setIsLoading(false);
    }
  }, [props.onPress, isDisabled]);
  
  // 8. Render helpers
  const renderTitle = () => (
    <Text style={[styles.title, { color: theme.colors.text }]}>
      {props.title}
    </Text>
  );
  
  // 9. Return JSX
  return (
    <View style={styles.container}>
      {renderTitle()}
      <Button 
        onPress={handlePress} 
        disabled={isDisabled}
        loading={isLoading}
      />
    </View>
  );
}
 
// 10. Styles
const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
  },
});