<template>
  <div class="h-full border-2 border-sky-300 flex flex-col p-4 bg-gray-50">
    <h2 class="text-lg font-semibold text-gray-800 mb-4">Servers</h2>
    <div class="space-y-2">
      <ServerLink
        v-for="server in serversWithFallback"
        :id="server.id"
        :key="server.id"
        class="text-gray-700 hover:text-sky-800"
      >
        {{ server.name }}
      </ServerLink>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Server {
  id: string;
  name: string;
}

const { data: servers, error } = await useFetch<Server[]>("/api/servers");

if (error.value) {
  console.error("Failed to fetch servers:", error.value);
}

const serversWithFallback = computed(() => {
  return servers.value || [
    { id: "1", name: "General" },
    { id: "2", name: "Gaming" },
    { id: "3", name: "Tech Talk" },
  ];
});
</script>
