<script setup>
  import heartFilled from "@/assets/heartFilled.png"
  import heartOutline from "@/assets/heartOutline.png"

  const props = defineProps({
    car : Object,
    favored : Boolean
  });

  const emit = defineEmits(['favor']);
  const config = useRuntimeConfig();
  // const favored = useState(`favored-${props.car.id}`,() => false);

  const handleClick = (car) => {    
    navigateTo(`/car/${car.name}-${car.id}`);
  }
</script>

<template>
         <!-- <img class="w-7 right-5 top-2 z-20" :src="favored ? heartFilled : heartOutline" alt="" @click="favored = !favored"/> -->
         <img class="w-7 right-5 top-2 z-20" 
            :src="favored ? heartFilled : heartOutline" alt="" 
            @click="emit('favor',car.id)"/>

    <div 
      class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
      @click="handleClick(car)">
        
        
         <div class="flex h-full">
          <NuxtImg :src="`${config.public.supabase.url}/storage/v1/object/public/images/${car.image}`" alt="" class="w-[300px] h-full"/>
          <div class="p-4 flex flex-col">
            <div>
              <h1 class="text-2xl text-blue-700">{{car.name}}</h1>
              <p class="text-gray-700">{{car.description}}</p>                  
            </div>
            <h1 class="mt-auto text-xl">${{car.price}}</h1>
          </div>
        </div>
    </div>
</template>