<template>
  <section v-if="news.length > 0" class="py-16 sm:py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
          Aktuelles
        </h2>
        <div class="w-24 h-1 bg-primary-600 mx-auto mb-6" />
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          Die neuesten Nachrichten aus unserem Verein
        </p>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <article
          v-for="item in news"
          :key="item.id"
          class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:shadow-lg transition-shadow"
        >
          <div class="flex items-center text-sm text-gray-500 mb-3">
            <Calendar :size="16" class="mr-2" />
            {{ formatDate(item.created) }}
          </div>
          
          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">
            {{ item.title }}
          </h3>
          
          <p class="text-gray-700 line-clamp-3">
            {{ item.content }}
          </p>
        </article>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Calendar } from 'lucide-vue-next'

const news = ref([])

const loadNews = async () => {
  try {
    const response = await $fetch('/api/news-public')
    news.value = response.news
  } catch (error) {
    console.error('Fehler beim Laden der öffentlichen News:', error)
  }
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('de-DE', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

onMounted(() => {
  loadNews()
})
</script>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

