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

interface Props {
  credits: EndpointCredit[];
}

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

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

<div>
  {
    credits.map(({ recorders, role: { icon, translations } }) => {
      const { language, name } = getLocalizedMatch(translations);
      return (
        <Metadata
          icon={icon}
          title={name}
          lang={language}
          values={recorders.map(({ username, id }) => ({
            name: username,
            href: getLocalizedUrl(`/recorders/${id}`),
          }))}
        />
      );
    })
  }
</div>

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

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