---
import type { CopyrightedCharacters } from "src/content.config";
import { t, type Lang } from "@i18n";
import UserComponent from "./UserComponent.astro";
import CopyrightedCharactersItem from "./CopyrightedCharactersItem.astro";
import { formatCopyrightedCharacters } from "@utils/format_copyrighted_characters";

type Props = {
  copyrightedCharacters?: CopyrightedCharacters;
  lang: Lang;
};

const { copyrightedCharacters, lang } = Astro.props;
const charactersPerUser = copyrightedCharacters ? await formatCopyrightedCharacters(copyrightedCharacters) : null;
---

{
  charactersPerUser ? (
    <section id="copyrighted-characters" aria-label={t(lang, "characters/copyrighted_characters_aria_label")}>
      <ul>
        {charactersPerUser.map(({ user, characters }) => (
          <CopyrightedCharactersItem
            stringFunction={(user) =>
              t(lang, "characters/characters_are_copyrighted_by", user, characters[0] === "" ? [] : characters)
            }
          >
            <UserComponent lang={lang} user={user} />
          </CopyrightedCharactersItem>
        ))}
      </ul>
    </section>
  ) : null
}
