<template>
    <div class="entrepreneur-list">
        <button @click="fetchEntrepreneurs">Afficher les entrepreneurs</button>

        <ul v-if="entrepreneurs.length">
            <li
                v-for="entrepreneur in entrepreneurs"
                :key="entrepreneur.idUser"
            >
                {{ entrepreneur.userName }} {{ entrepreneur.userSurname }} -
                {{ entrepreneur.primaryMail }}
            </li>
        </ul>

        <p v-else-if="loading">Chargement...</p>
        <p v-else-if="errorMessage">{{ errorMessage }}</p>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { AxiosResponse, AxiosError } from "axios";
import { getAllEntrepreneurs } from "@/services/Apis/Unauth"; // ajuste ce chemin selon ton projet

// Types
interface Entrepreneur {
    idUser: number;
    userName: string;
    userSurname: string;
    primaryMail: string;
}

// Refs
const entrepreneurs = ref<Entrepreneur[]>([]);
const loading = ref(false);
const errorMessage = ref("");

// Méthode
function fetchEntrepreneurs() {
    loading.value = true;
    errorMessage.value = "";
    getAllEntrepreneurs(
        (response: AxiosResponse) => {
            if (Array.isArray(response.data)) {
                entrepreneurs.value = response.data;
            } else {
                console.error("Format inattendu :", response.data);
                errorMessage.value = "Réponse inattendue du serveur.";
            }
            loading.value = false;
        },
        (error: AxiosError) => {
            errorMessage.value = "Erreur lors du chargement des entrepreneurs.";
            console.error(error);
            loading.value = false;
        }
    );
}
</script>

<style scoped>
button {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 0.5rem;
}
</style>
