<template>
  <div v-if="perimeters.length > 0" class="w-full flex flex-col gap-1">
    <p class="text-xs font-semibold text-white/50 uppercase tracking-wide">P&eacute;rim&egrave;tres sauvegard&eacute;s</p>
    <div class="flex flex-col gap-0.5 w-full">
      <div
        v-for="p in perimeters"
        :key="p.name"
        class="gw-perimeter-item"
        @click="emit('load', p)"
      >
        <div class="flex items-center gap-1.5 min-w-0">
          <span class="text-accent text-xs shrink-0">&#x1F4CD;</span>
          <span class="text-xs font-medium truncate">{{ p.name }}</span>
          <span class="text-[10px] text-white/30 shrink-0">
            {{ new Date(p.createdAt).toLocaleDateString('fr-FR', { dateStyle: 'short' }) }}
          </span>
        </div>
        <button
          class="gw-perimeter-delete"
          @click.stop="emit('delete', p.name)"
        >
          &times;
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SavedPerimeter } from '~/composables/useSavedPerimeters';

defineProps<{
  perimeters: SavedPerimeter[];
}>();

const emit = defineEmits<{
  load: [perimeter: SavedPerimeter];
  delete: [name: string];
}>();
</script>
