---
import { getCollection } from "astro:content";
import Base from "@layouts/Base.astro";
import KeywordsList from "@components/organisms/KeywordsList.astro";

const title = "Palavras-Chave";
const description = "Palavras-Chave";

const blogs = await getCollection("blog");

const map: Map<string, number> = new Map();
for (const { data } of blogs) {
  if (!("keywords" in data)) {
    continue;
  }

  for (const k of data.keywords) {
    const n = map.get(k) ?? 0;
    map.set(k, n + 1);
  }
}

let keywords = Array.from(map.entries()).sort(([, a], [, b]) => b - a).map((
  [x],
) => x);
---

<Base {title} {description} {keywords}>
  <main
    itemprop="mainContentOfPage"
    itemscope
    itemtype="https://schema.org/WebPageElement"
  >
    <h2 itemprop="name description">Palavras-Chave</h2>
    <div>
      <KeywordsList {keywords} />
    </div>
  </main>
</Base>

<style>
  div {
    display: flex;
    margin-inline: auto;
  }
</style>