<template>
  <RouterLink
    :to="`/manage/qr/${qrCode.uri}`"
    class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow-md text-gray-800 dark:text-gray-300"
  >
    <div class="flex items-center justify-between mb-2">
      <div class="flex items-center gap-2">
        <QRCodePlacementIcon :placement="qrCode.placement" />
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
          {{ qrCode.name }}
        </h2>
      </div>
    </div>
    <div class="text-gray-500 dark:text-gray-400">
      Создан: <span class="text-nowrap">{{ formatedCreatedAt }}</span>
    </div>
  </RouterLink>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { QRCodeDocument } from '@hereconnect/types'

const props = defineProps<{
  qrCode: QRCodeDocument
}>()

const formatDate = (date: string) => {
  // Форматирование даты
  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString(['ru-RU'], options)
}

const formatedCreatedAt = computed(() => formatDate(props.qrCode.created_at))
</script>
