<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
import Field from '~/components/pub/my-ui/form/field.vue'
import Label from '~/components/pub/my-ui/form/label.vue'
import Select from '~/components/pub/my-ui/form/select.vue'
import { Form } from '~/components/pub/ui/form'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
import { cn } from '~/lib/utils'

const props = defineProps()

const items = reactive([
  { id: 1, description: 'Shipped from warehouse', createdAt: new Date(Date.now() - 86400000 * 2) },
  { id: 2, description: 'In transit to distribution center', createdAt: new Date(Date.now() - 86400000) },
  { id: 3, description: 'Out for delivery (Current)', createdAt: new Date() },
])
const itemsCount = computed(() => items.length || 0)
</script>

<template>
  <ul :class="cn('pb-5 flex flex-col min-h-[30rem]', '')">
    <li v-for="(item, index) in items" :key="item.id" class="flex gap-3 items-start">

      <div class="flex flex-col items-center">
        <div class="h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
          <div :class="cn('dark:bg-white border-gray-300 rounded-full p-1.5',
            index === 0 ? 'bg-green-500' : 'bg-transparent'
          )">
          </div>
        </div>

        <hr v-if="index !== itemsCount - 1" class="h-8 w-0.5 bg-gray-300 dark:bg-gray-300" aria-hidden="true">
      </div>

      <div class="flex justify-between items-center min-w-96">
        <div class="max-w-80">
          <time :class="cn('font-medium text-gray-800 dark:text-gray-100', '')">
            {{ item?.createdAt.toLocaleDateString('id-ID') }}
          </time>
          <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">{{ item.description }}</h1>
        </div>
      </div>
    </li>
  </ul>
</template>