import React from 'react';
import { View, Text } from 'react-native';
import { useAppTheme } from '@theme';
import { LocationPinIcon } from '@icons/locationPinIcon';
import { getStyles } from './locationRow.styles';

interface LocationRowProps {
  type: 'pickup' | 'drop';
  name: string;
  address: string;
}

export const LocationRow: React.FC<LocationRowProps> = ({ type, name, address }) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const isPickup = type === 'pickup';
  const iconColor = isPickup ? colors.statusOffline : colors.statusOnline;
  const bgStyle = isPickup ? styles.pickupBg : styles.dropBg;

  return (
    <View style={styles.container}>
      <View style={[styles.iconWrapper, bgStyle]}>
        <LocationPinIcon size={16} color={iconColor} />
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.address}>{address}</Text>
      </View>
    </View>
  );
};
export default LocationRow;