---
import config from "@/config/config.json";
import { getLangFromUrl } from "@/lib/utils/i18nUtils";
import { humanize, slugify } from "@/lib/utils/textConverter";
const { default_language } = config.settings;

const { tags, categories, allCategories } = Astro.props;
const lang = getLangFromUrl(Astro.url);
---

<div class="lg:col-4">
  <!-- categories -->
  <div class="mb-8">
    <h5 class="mb-6">Categories</h5>
    <div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
      <ul class="space-y-4">
        {
          categories.map((category: any) => {
            const count = allCategories.filter(
              (c: any) => c === category
            ).length;
            return (
              <li>
                <a
                  class="flex justify-between hover:text-primary dark:hover:text-darkmode-primary"
                  href={`${lang === default_language ? "" : `/${lang}`}/categories/${slugify(category)}`}
                >
                  {humanize(category)} <span>({count})</span>
                </a>
              </li>
            );
          })
        }
      </ul>
    </div>
  </div>
  <!-- tags -->
  <div class="mb-8">
    <h5 class="mb-6">Tags</h5>
    <div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
      <ul>
        {
          tags.map((tag: any) => {
            return (
              <li class="inline-block">
                <a
                  class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
                  href={`${lang === default_language ? "" : `/${lang}`}/tags/${slugify(tag)}`}
                >
                  {humanize(tag)}
                </a>
              </li>
            );
          })
        }
      </ul>
    </div>
  </div>
</div>