import {View, Text, TouchableOpacity, Image} from 'react-native'
import React from 'react'
import images from "@/constants/images";
import icons from "@/constants/icons";
import { router } from "expo-router";
import { cars, featuredCars } from "@/constants/data";
import { useLocalSearchParams } from "expo-router";


interface Props {
    onPress?: () => void;
    id?: string;
    data: {
        id?: string;
        $id?: string;
        title: string;
        location: string;
        price: string | number;
        image?: string;
        images?: string[];
        make?: string;
        model?: string;
        year: string | number;
        fuelType: string;
        transmission: string;
        mileage?: string;
        description: string;
        category?: string;
        postedBy?: string;
        createdAt?: string;
    };
}

export const FeaturedCard = ({data} :Props) => {
    return (
        <TouchableOpacity 
            onPress={() => router.push(`/cars/${data.$id || data.id}`)} 
            className={'flex flex-col items-start w-60 h-60 relative'}
        >
            <Image 
                source={{ uri: data.images?.[0] || data.image }} 
                className={'w-60 h-40 rounded-2xl'} 
                resizeMode={"cover"}
            />
            <Image source={images.cardGradient} className={'size-full rounded-2xl absolute bottom-0'}/>

            <View className={'flex flex-col items-start absolute bottom-1 inset-x-5'}>
                <Text className={'text-white text-base font-bold'} numberOfLines={1}>{data.title}</Text>
                <Text className={'text-white'}>{data.location}</Text>

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


export const Card = ({data} :Props) => {
    return (
        <TouchableOpacity 
            onPress={() => router.push(`/cars/${data.$id || data.id}`)} 
            className={'flex-1 w-full mt-4 px-3 py-4 rounded-xl bg-white shadow-lg shadow-black-100/70 relative'}
        >
            <Image 
                source={{ uri: data.images?.[0] || data.image }} 
                className={'w-full h-40 rounded-lg'}
                resizeMode="cover"
            />
            <View className={'flex flex-col mt-2'}>
                <Text className={'text-base text-gray-600'}>{data?.title}</Text>
                <Text className={'text-sm'}>{data?.location}</Text>
                <Text className={'text-base text-blue-500'}>€{data?.price}</Text>
            </View>
        </TouchableOpacity>
    )
}

const CarDetails = () => {
  const { id } = useLocalSearchParams();
  const carData = [...cars, ...featuredCars].find(car => car.id === id);
}