---
import type { EndpointCredit } from "src/shared/payload/payload-sdk";
import { getI18n } from "src/i18n/i18n";
import InlineMetadata from "./InlineMetadata.astro";

interface Props {
  credits: EndpointCredit[];
}

const { credits } = Astro.props;
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<div>
  {
    credits.map(({ recorders, role: { icon, translations } }) => (
      <InlineMetadata
        icon={icon}
        title={getLocalizedMatch(translations).name}
        values={recorders.map(({ username }) => ({ name: username }))}
      />
    ))
  }
</div>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  div {
    display: grid;
    gap: 2em;

    @media (max-width: 35rem) {
      gap: 3em;
    }
  }
</style>