import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { OrderHistoryCardProps } from './orderHistoryCard.props';
import { getStyles } from './orderHistoryCard.styles';
import { useAppTheme } from '@theme';

export const OrderHistoryCard: React.FC<OrderHistoryCardProps> = ({
  providerName,
  providerImage,
  orderDate,
  status,
  total,
  onReorder,
  onDetails,
  items,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.image}>
          <Text style={styles.imagePlaceholder}>{providerImage || '🏪'}</Text>
        </View>
        <View style={styles.headerInfo}>
          <Text style={styles.providerName}>{providerName}</Text>
          <Text style={styles.orderDate}>{orderDate}</Text>
        </View>
        <View style={styles.statusBadge}>
          <Text style={styles.statusText}>{status}</Text>
        </View>
      </View>
      {items && items.length > 0 && (
        <View style={styles.itemsContainer}>
          {items.map((item, index) => (
            <View key={item.id || index} style={styles.itemRow}>
              <View style={styles.itemQuantityBadge}>
                <Text style={styles.itemQuantityText}>{item.quantity}x</Text>
              </View>
              <Text style={styles.itemName} numberOfLines={1}>
                {item.name}
              </Text>
            </View>
          ))}
        </View>
      )}
      <View style={styles.footer}>
        <Text style={styles.total}>₹{total}</Text>
        <View style={styles.actions}>
          {onReorder && (
            <TouchableOpacity
              style={styles.actionButton}
              onPress={onReorder}
              activeOpacity={0.7}
            >
              <Text style={styles.actionButtonText}>Reorder</Text>
            </TouchableOpacity>
          )}
          {onDetails && (
            <TouchableOpacity
              style={styles.actionButton}
              onPress={onDetails}
              activeOpacity={0.7}
            >
              <Text style={styles.actionButtonText}>Details</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </View>
  );
};