---
import type { CollectionEntry } from 'astro:content';
import ProjectLinks from './ProjectLinks.astro';

type Link = CollectionEntry<'projects'>['data']['links'][number];

interface Props {
  role?: string;
  projectPeriod?: string;
  stack?: string[];
  scale?: string;
  outcome?: string;
  links?: Link[];
  headingId?: string;
}

const {
  role,
  projectPeriod,
  stack = [],
  scale,
  outcome,
  links = [],
  headingId = 'at-a-glance-heading',
} = Astro.props;

const rows: Array<[string, string]> = [
  ['Role', role ?? ''],
  ['Period', projectPeriod ?? ''],
  ['Stack', stack.join(', ')],
  ['Scale', scale ?? ''],
  ['Outcome', outcome ?? ''],
].filter((row): row is [string, string] => Boolean(row[1]));
---

{
  rows.length > 0 && (
    <aside class="at-a-glance" aria-labelledby={headingId}>
      <h2 id={headingId}>At a Glance</h2>
      <dl>
        {rows.map(([label, value]) => (
          <div class="at-a-glance__row">
            <dt>{label}</dt>
            <dd>{value}</dd>
          </div>
        ))}
      </dl>
      {links.length > 0 && <ProjectLinks links={links} />}
    </aside>
  )
}
