<script setup>
    import { computed } from 'vue';

    const route = useRoute();

    const {data:car} = await useFetchCar(route.params.id);


    const {toTitleCase} = useUtilities();
    const {cars} = useCars();

    useHead({
        title :toTitleCase(route.params.name )
    });

    // const car = computed(() => {
    //     return cars.find((_) => {
    //         return _.id === parseInt(route.params.id)
    //     });
    // });


    if (!car.value) {
        throw createError({
            statusCode: 404,
            message: `Car with ID ${route.params.id} not found`
        });
    }


    definePageMeta({
        layout: "custom"
    });

</script>

<template>
    <div v-if="car">        
        <CarDetailHero :car="car"/>        
        <CarDetailAttributes :features="car.features"/>
        <CarDetailDescription :description="car.description"/>
        <CarDetailContact/>              
    </div>
</template>