<template>
    <div class="cars-section-home">
        <div class="container">
            <div class="text">
                <h2 class="mobileHead">{{ $t("cars") }}</h2>
                <p>{{ $t("car1") }}</p>
            </div>
            <div v-if="store.carsHome" class="row">
                <div
                    v-for="(item, index) in store.carsHome.slice(0, 4)"
                    :key="item"
                    class="col-12 col-xl-3 col-lg-4 col-md-6 mb-5"
                >
                    <car-card :item="item"></car-card>
                </div>
            </div>

            <div class="d-flex align-items-center justify-content-center">
                <nuxt-link aria-label="more" :to="localePath('/cars')">
                    <button class="more-btn">{{ $t("more") }}</button>
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script setup>
const localePath = useLocalePath();
import { useHomeStore } from "@/stores/home";
let store = useHomeStore();
</script>

<style></style>
