<template>
  <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ sermon.title }}</h3>
      <p class="text-sm text-gray-500 mb-4">{{ formatDate(sermon.date) }}</p>
      
      <div class="flex items-center justify-between">
        <NuxtLink 
          :to="`/${sermon.slug}`"
          class="text-blue-600 hover:text-blue-700 font-medium text-sm"
        >
          View Sermon →
        </NuxtLink>
        
        <QRCodeButton :sermon="sermon" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Sermon {
  id?: number
  slug: string
  title: string
  date: string
  bible_references: string
  personal_appliance: string
  pastors_challenge: string
}

defineProps<{
  sermon: Sermon
}>()

function formatDate(dateString: string) {
  // Add T00:00:00 to ensure the date is interpreted as local time, not UTC
  const date = new Date(dateString + 'T00:00:00')
  return date.toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  })
}
</script>
