import {View, Text, TouchableOpacity, Image} from 'react-native'
import React from 'react'
import images from "@/constants/images";
import icons from "@/constants/icons";


interface Props {
    onPress?: () => void
}

export const FeaturedCard = ({onPress} :Props) => {
    return (
        <TouchableOpacity className={'flex flex-col items-start w-60 h-60 relative'}>
            <Image  source={images.car1} className={'w-60 h-40 rounded-2xl'} resizeMode={"contain"}/>
            <Image  source={images.cardGradient} className={'size-full rounded-2xl absolute bottom-0'}/>

            <View className={'flex flex-row items-center bg-white/90 px-3 py-1.5 rounded-full absolute top-5 right-1'}>
                <Image source={icons.star} className={'size-3'}/>
                <Text className={'text-sm ml-1'}>5.0</Text>
            </View>
            <View className={'flex flex-col items-start absolute bottom-1 inset-x-5'}>
                <Text className={'text-white text-base font-bold'} numberOfLines={1}>Honda - xyz</Text>
                <Text className={'text-white'}>Skopje</Text>

                <View className={'flex flex-row items-center justify-between w-full'}>
                    <Text className={'text-base text-white'}>
                        25.000
                    </Text>
                    <Image source={icons.heart} className={'size-5'}/>
                </View>
            </View>
        </TouchableOpacity>
    )
}

export const Card = ({onPress} :Props) => {
    return (
        <TouchableOpacity onPress={onPress} className={'flex-1 w-full mt-4 px-3 py-4 rounded-xl bg-white shadow-lg shadow-black-100/70 relative'}>
            <View className={'flex flex-row items-center absolute px-2 top-5 right-5  bg-white/90 p-1 rounded-full z-50'}>
                <Image  source={icons.star} className={'size-2.5'}/>
                <Text className={'text-sm ml-1'}>5.0</Text>
            </View>
            <Image  source={images.car2} className={'w-full h-40 rounded-lg'}/>
            <View className={'flex flex-col mt-2'}>
                <Text className={'text-base text-gray-600'}>xyz</Text>
                <Text className={'text-sm'}>Skopje</Text>
            </View>
        </TouchableOpacity>
    )
}