import { icons } from "@/constants";
import { Image, Text, View } from "react-native";
import tw from "twrnc";
import { formatDate, formatTime } from "@/lib/utils";
const RideCard = ({ ride: { destination_longitude, destination_latitude, origin_address, destination_address, created_at, ride_time, driver,payment_status }, }: { ride: Ride }) => (
    <View style={tw`flex flex-row items-center justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 mb-3`}>
        <View style={tw`flex flex-col items-center justify-center p-3`}>
            <View style={tw`flex flex-row items-center justify-between`}>
                <Image
                    source={{ uri: `https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400&center=lonlat:${destination_longitude},${destination_latitude}&zoom=14&apiKey=${process.env.EXPO_PUBLIC_GEOAPIFY_API_KEY}`, }}
                    style={tw`w-[80px] h-[90px] rounded-lg`} />
                <View style={tw`flex flex-col mx-5 gap-y-5 flex-1`}>
                    <View style={tw`flex flex-row items-center gap-x-2`}>
                        <Image source={icons.to} style={tw`w-5 h-5`} />
                        <Text style={tw`text-md font-JakartaMedium`} numberOfLines={1}>{origin_address}</Text>
                    </View>
                    <View style={tw`flex flex-row items-center gap-x-2`}>
                        <Image source={icons.point} style={tw`w-5 h-5`} />
                        <Text style={tw`text-md font-JakartaMedium`} numberOfLines={1}>{destination_address}</Text>
                    </View>
                </View>
            </View>
            <View style={tw`flex flex-col w-full mt-5 bg-general-500 rounded-lg p-3 items-start justify-center`} >
                <View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}> Date & Time</Text>
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}>{formatDate(created_at)}, {formatTime(ride_time)}</Text>
                </View>
                <View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}> Driver</Text>
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}>{driver.first_name}, {driver.last_name}</Text>
                </View>
                <View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}> Car Seats</Text>
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}>{driver.car_seats}</Text>
                </View>
                <View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 `}>payment Status</Text>
                    <Text style={tw`text-md font-JakartaMedium text-gray-500 ${payment_status === 'paid' ? "text-green-500" : "text-red-500"}`}>{payment_status.charAt(0).toUpperCase() + payment_status.slice(1)}</Text>
                </View>
            </View>
        </View>
    </View>
);

export default RideCard;