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

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

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

const { projectPeriod, stack = [], scale, outcome, links = [], headingId } = Astro.props;

const rows: Array<[string, string]> = [];
if (projectPeriod) rows.push(['Period', projectPeriod]);
if (stack.length > 0) rows.push(['Stack', stack.join(', ')]);
if (scale) rows.push(['Scale', scale]);
if (outcome) rows.push(['Outcome', outcome]);
---

{
  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>
  )
}
