import React from 'react';
import { View, Text } from 'react-native';
import { useAppTheme } from '@theme';
import { Card } from '../card/card';
import { LocationRow } from '../locationRow/locationRow';
import { formatCurrency, formatDistance } from '@utils/formatters';
import { getStyles } from './orderCard.styles';

interface OrderCardProps {
  pickupName: string;
  pickupAddress: string;
  dropName: string;
  dropAddress: string;
  amount: number;
  distance: number;
  itemCount?: number;
  paymentType?: string;
  onPress?: () => void;
}

export const OrderCard: React.FC<OrderCardProps> = ({
  pickupName,
  pickupAddress,
  dropName,
  dropAddress,
  amount,
  distance,
  itemCount,
  paymentType,
  onPress,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <Card onPress={onPress}>
      <LocationRow type="pickup" name={pickupName} address={pickupAddress} />
      <View style={styles.spacer} />
      <LocationRow type="drop" name={dropName} address={dropAddress} />

      <View style={styles.detailsRow}>
        <View>
          <Text style={styles.label}>ESTIMATED EARNINGS</Text>
          <Text style={styles.amount}>{formatCurrency(amount)}</Text>
        </View>
        <View style={styles.centerCol}>
          <Text style={styles.label}>DISTANCE</Text>
          <Text style={styles.distance}>{formatDistance(distance)}</Text>
        </View>
        {(itemCount !== undefined || paymentType !== undefined) && (
          <View style={styles.endCol}>
            <Text style={styles.label}>DETAILS</Text>
            <Text style={styles.value}>
              {itemCount ? `${itemCount} items` : ''}
              {paymentType ? ` • ${paymentType.toUpperCase()}` : ''}
            </Text>
          </View>
        )}
      </View>
    </Card>
  );
};
export default OrderCard;