<template>
    <div style="background-color: #f4f4f4;">
        <DefaultLayout />

        <v-container fluid style="margin-top: 100px; font-size: 3rem;">
            <v-row justify="center">
                <v-col cols="12" class="text-center">
                    <v-row justify="center">
                        <!-- Colonne de gauche -->
                        <v-col class="text-left d-flex justify-center "> <!-- Ajout de align-center -->
                            <router-link to="/" class="d-flex justify-center">
                                <!-- Retrait de la classe align-center -->
                                <v-btn color="#a30e79">Accueil</v-btn>
                            </router-link>
                        </v-col>
                        <v-col cols="12">

                            <div class="headline font-weight-bold">UTILISATEURS</div>

                        </v-col>
                    </v-row>
                </v-col>
            </v-row>
        </v-container>

        <v-container fluid style="margin-bottom: 80px;">
            <v-row justify="center">
                <v-col cols="12" sm="8" md="8">
                    <v-container class="mt-10">
                        <v-row justify="center">
                            <router-link v-for="(profile, index) in profiles" :key="index" :to="profile.routerLink"
                                class="text-decoration-none">
                                <v-col>
                                    <v-card class="mb-4 card-equal-width" style="max-width: 250px; height: 325px;">
                                        <v-img :src="profile.imageUrl" height="200px" width="300px"
                                            style="margin-top: 10px;"></v-img>
                                        <v-card-title style="font-weight: 600;" class="text-center">{{ profile.name
                                            }}</v-card-title>
                                        <v-card-text class="text-center">{{ profile.description }}</v-card-text>
                                    </v-card>
                                </v-col>
                            </router-link>
                        </v-row>
                    </v-container>
                </v-col>
            </v-row>
        </v-container>
        <FooterLayout />
    </div>
</template>

<style>
.card-equal-width {
    max-width: 300px;
    /* Ajustez cette valeur selon vos besoins */
}
</style>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';

const profiles = ref([
    {
        id: 1,
        name: "Hutopy",
        description: "Page officiel",
        imageUrl: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
        routerLink: 'Hutopy'
    },
    {
        id: 2,
        name: "L'effet",
        description: "Fondation",
        imageUrl: '/images/usersmedia/leffet/profilepictures/leffetProfile01.png',
        routerLink: 'leffet'
    },
    {
        id: 3,
        name: "Guillaume M",
        description: "Créateur de contenus",
        imageUrl: '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
        routerLink: 'guillaumeaime'
    },
    {
        id: 4,
        name: "Chloé Beaugrand",
        description: "Spécialiste en médias sociaux",
        imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
        routerLink: 'chloebeaugrand'
    }
]);
</script>

<style scoped>
.text-decoration-none {
    text-decoration: none;
}

.card-equal-width {
    width: 220px;
}
</style>
