<script setup>
  const { path } = useRoute()

  const { data, error } = await useAsyncData(`content-${path}`, () => {
    return queryContent().where({ _path: path }).findOne()
  })

  if (error.value) {
    showError(
      createError({
        statusCode: 404,
        statusMessage: 'Not Found',
      })
    )
  }

  import { format, getDay, parseISO } from "date-fns";

  const nth = function(d) {
    if (d > 3 && d < 21) return 'th';
    switch (d % 10) {
      case 1:  return "st";
      case 2:  return "nd";
      case 3:  return "rd";
      default: return "th";
    }
  }

  let date = parseISO(data.value.date)
  data.value.date = format(date, 'EEE, MMMM d')
  data.value.ordinal = nth(getDay(date) - 1)

</script>

<template>
  <div class="event" :id="data.slug">
    <div class="hero">
      <h3>{{ data.title }}</h3>
      <h4>Location: {{ data.location}}</h4>
      <h4>Address: {{ data.address }}</h4>
      <h4>Date: {{ data.date }}{{ data.ordinal }} at {{ data.time }}</h4>
      <!-- <EventDate :date="data.date" :time="data.time" /> -->
    </div>
  </div>
</template>