import { View, Text, Image, StyleSheet, Pressable } from 'react-native';
import React from 'react';
import { StarSvg } from './SVG';
import { router } from 'expo-router';

const ChooseCarForChargingRow = ({
    imageUrl,
    VehicleName,
    isDefault
}: {
    imageUrl?: any;
    VehicleName: string;
    isDefault: boolean;
}) => (
    <Pressable onPress={() => router.push('/bookingConfirmationPage')}>
        <View className="relative bg-white w-44 h-[170px] overflow-hidden rounded-lg items-center justify-center mr-3 ">
            {isDefault && (
                <>
                    <View style={styles.topLeftTriangle} />
                    <View className="absolute top-1 left-1">
                        <StarSvg />
                    </View>
                </>
            )}
            <View className="items-center justify-center pt-4 space-y-2 ">
                <Image
                    source={
                        imageUrl ? imageUrl : require('../../assets/car2.png')
                    }
                    style={{ height: 72, width: 140 }}
                />
                <Text className="text-base text-[#222222]">{VehicleName}</Text>
            </View>
        </View>
    </Pressable>
);

export default ChooseCarForChargingRow;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    topLeftTriangle: {
        width: 0,
        height: 0,
        borderLeftWidth: 50,
        borderBottomWidth: 50,
        borderLeftColor: '#02677D',
        borderBottomColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});