<script setup lang="ts">
import { PrinterCard } from "@continuum/ui";
import { useTelemetryStore } from "~/stores/telemetry";

interface Printer {
  id: string;
  name: string;
  model: string;
  farmId: string;
}

const telemetry = useTelemetryStore();
const config = useRuntimeConfig();

const { data: printers } = await useFetch<Printer[]>(`${config.public.apiBase}/printers`, {
  headers: useRequestHeaders(["cookie"]),
});
</script>

<template>
  <div class="fleet">
    <h1>Fleet overview</h1>
    <div class="fleet__grid">
      <PrinterCard
        v-for="printer in printers ?? []"
        :key="printer.id"
        :printer="printer"
        :live="telemetry.printers[printer.id]"
      />
    </div>
    <p v-if="!printers?.length">No printers registered yet.</p>
  </div>
</template>

<style scoped>
.fleet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
</style>
