---
import SectionHeading from './SectionHeading.astro';
import type { NewsItem } from '../lib/fallback-data';
import { formatDate } from '../lib/format';

type Props = {
  news: NewsItem[];
  title?: string;
  description?: string;
};

const { news, title = 'Latest news', description = 'Fresh updates, operational changes, and airport announcements.' } = Astro.props as Props;
---

<section>
  <SectionHeading eyebrow="News" title={title} description={description} />
  <div class="cards-grid">
    {news.length > 0 ? (
      news.map((item) => (
        <article class="card">
          <p class="meta">{formatDate(item.publish_date)}</p>
          <h3><a href={`/news/${item.slug}/`}>{item.title}</a></h3>
          <p>{item.summary}</p>
        </article>
      ))
    ) : (
      <article class="card">
        <h3>No news items</h3>
        <p>Stay tuned for updates as they are published!</p>
      </article>
    )}
  </div>
</section>