<template>
  <RouterLink :to="`/manage/qr/${qrCode.uri}/ready`" class="p-4 rounded-lg bg-white shadow-md">
    <div class="flex items-center justify-between mb-2">
      <div class="flex items-center">
        <i :class="['pi', iconClass, 'text-gray-500', 'mr-2']" />
        <h2 class="text-lg font-semibold">{{ qrCode.name }}</h2>
      </div>
      <!--      <Button-->
      <!--        label="Настроить"-->
      <!--        :to="`/manage/${qrCode.uri}/settings`"-->
      <!--        as="router-link"-->
      <!--        class="p-button-outlined p-button-sm"-->
      <!--      />-->
    </div>
    <div class="text-gray-500">Создано: {{ formatedCreatedAt }}</div>
  </RouterLink>
</template>

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

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

const iconClass = computed(() => {
  const icons: Record<string, string> = {
    car: 'pi-car',
    pet: 'pi-paw',
    door: 'pi-door-closed',
    store: 'pi-shop',
    restaurant_table: 'pi-utensils',
    other: 'pi-question-circle',
  }
  return icons[props.qrCode.placement] || 'pi-question-circle'
})

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>
