<script setup>
  const props = defineProps({
    car : Object
  });

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

<template>
    <div 
      class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
      @click="handleClick(car)">
        <div class="flex h-full">
          
          <img :src="car.url" alt=""/>
          <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">$39,555</h1>
          </div>
        </div>
    </div>
</template>