import React from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';
import { styles } from '../styles';

export default function TripPicker({ trips, selectedTripId, onChooseTrip }) {
  return (
    <View style={styles.tripPickerWrap}>
      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tripChipScroll}>
        {trips.length ? (
          trips
            .slice()
            .sort((a, b) => b.startDate.localeCompare(a.startDate))
            .map((trip) => {
              const active = selectedTripId === trip.id;
              return (
                <Pressable key={trip.id} style={[styles.tripChip, active && styles.tripChipActive]} onPress={() => onChooseTrip(trip.id)}>
                  <Text style={[styles.tripChipText, active && styles.tripChipTextActive]}>{trip.name}</Text>
                  <Text style={[styles.tripChipSub, active && styles.tripChipSubActive]}>{trip.startDate}</Text>
                </Pressable>
              );
            })
        ) : (
          <Text style={styles.muted}>Create your first trip to start.</Text>
        )}
      </ScrollView>
    </View>
  );
}