---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';

interface Props {
  locale: Locale;
  tldr: { what: string; why: string; stack: string; role: string };
}
const { locale, tldr } = Astro.props;
const d = useDict(locale);
const rows: [string, string][] = [
  [d.project.tldr.what, tldr.what],
  [d.project.tldr.why, tldr.why],
  [d.project.tldr.stack, tldr.stack],
  [d.project.tldr.role, tldr.role],
];
---

<div class="bg-surface-2 relative overflow-hidden rounded-md p-6 pl-7">
  <span class="bg-accent absolute inset-y-0 left-0 w-[3px]" aria-hidden="true"></span>
  <p class="mono-label mb-4">TL;DR</p>
  <dl class="flex flex-col gap-2.5">
    {
      rows.map(([term, val]) => (
        <div class="flex flex-col gap-1 sm:flex-row sm:gap-3">
          <dt class="text-ink w-16 shrink-0 font-semibold">{term}</dt>
          <dd class="text-ink-muted">{val}</dd>
        </div>
      ))
    }
  </dl>
</div>
