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

type Props = {
  contacts: ContactItem[];
};

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

<section>
  <SectionHeading eyebrow="Contact" title="Public contacts" description="Only public-facing contacts are shown here." />
  <div class="cards-grid">
    {contacts
      .filter((contact) => contact.is_public !== false)
      .sort((left, right) => (left.order ?? 0) - (right.order ?? 0))
      .map((contact) => (
        <article class="card">
          <h3>{contact.name}</h3>
          <p class="muted">{contact.role}</p>
          <p><a href={`mailto:${contact.email}`}>{contact.email}</a></p>
          {contact.phone && <p><a href={`tel:${contact.phone.replace(/\s+/g, '')}`}>{contact.phone}</a></p>}
        </article>
      ))}
  </div>
</section>
