---
import SectionHeading from './SectionHeading.astro';
import type { Notice } from '../lib/fallback-data';

type Props = {
  notices: Notice[];
};

const { notices } = Astro.props as Props;
const visibleNotices = notices.filter((notice) => notice.active !== false).sort((left, right) => (right.priority ?? 0) - (left.priority ?? 0));
---

<section>
  <SectionHeading eyebrow="Operational notices" title="Live airfield alerts" description="High-visibility status messages for pilots, visitors, and staff." />
  <div class="notice-list">
    {visibleNotices.length > 0 ? (
      visibleNotices.map((notice) => (
        <article class={`notice ${notice.severity}`}>
          <p class="pill">{notice.severity}</p>
          <h3>{notice.title}</h3>
          <p>{notice.message}</p>
        </article>
      ))
    ) : (
      <article class="notice info">
        <h3>No active notices</h3>
        <p>Operational messages will appear here when published in Directus.</p>
      </article>
    )}
  </div>
</section>
