---
interface Fact {
  label: string;
  value: string;
}

interface Props {
  facts: Fact[];
  summary: string;
  ariaLabel?: string;
}

const { facts, summary, ariaLabel = 'Snelle feiten' } = Astro.props;
---

<div
  class="quick-facts mt-5 rounded-2xl border border-border/50 bg-bg-elevated/60 px-4 py-3"
  itemscope
  itemtype="https://schema.org/Offer"
  aria-label={ariaLabel}
>
  <p class="text-sm leading-relaxed text-text" data-quick-facts-summary>{summary}</p>
  <dl class="mt-2 grid grid-cols-1 gap-x-4 gap-y-1 text-xs text-text-secondary sm:grid-cols-2">
    {facts.map(fact => (
      <div class="flex items-baseline gap-1.5">
        <dt class="font-bold uppercase tracking-widest text-text-muted">{fact.label}:</dt>
        <dd class="text-text">{fact.value}</dd>
      </div>
    ))}
  </dl>
</div>