export function Section({ title, children, aside, id, icon }: { title: string; children: React.ReactNode; aside?: React.ReactNode; id?: string; icon?: React.ReactNode }) {
  return (
    <section id={id} aria-labelledby={id ? `${id}-h` : undefined} className="scroll-mt-24">
      <div className="mb-5 flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
        <h2 id={id ? `${id}-h` : undefined} className="flex items-center gap-2.5 font-serif text-2xl font-semibold tracking-tight">
          {icon && <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-ledger-soft text-ledger">{icon}</span>}
          {title}
        </h2>
        {aside}
      </div>
      {children}
    </section>
  );
}

export function Stat({ value, label, icon }: { value: React.ReactNode; label: string; icon?: React.ReactNode }) {
  return (
    <div className="flex items-center gap-3">
      {icon && <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-ledger-soft text-ledger">{icon}</span>}
      <div className="flex min-w-0 flex-col-reverse">
        <dt className="text-sm text-muted">{label}</dt>
        <dd className="num font-serif text-2xl font-semibold leading-tight text-ink">{value}</dd>
      </div>
    </div>
  );
}