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

type Props = {
  documents: DocumentItem[];
};

const { documents } = Astro.props as Props;
---

<section>
  <SectionHeading eyebrow="Documents" title="Downloads and reference material" description="Flight documents, airport guidance, and public information in one place." />
  <div class="stack">
    {documents.map((document) => (
      <article class="card">
        <div class="split-grid" style="align-items:start;">
          <div>
            <p class="pill">{document.category}</p>
            <h3>{document.title}</h3>
            {document.description && <p>{document.description}</p>}
          </div>
          <div>
            {document.uploaded_at && <p class="meta">Uploaded {formatDate(document.uploaded_at)}</p>}
            {document.fileUrl ? <p><a class="button secondary" href={document.fileUrl}>Download</a></p> : <p class="muted">File will be linked from Directus.</p>}
          </div>
        </div>
      </article>
    ))}
  </div>
</section>
