---
import { getAllCourses, getUniqueCategories } from '../../libs/courses';
import { fromSnakeCase } from '../../utils';
const categories = getUniqueCategories(getAllCourses());
---
<aside class="root" data-course-aside>
  <p class="text">Filtrar Resultados</p>
  <div class="accordion-item accordion">
    <h2 class="accordion-header">
      <button
        class="accordion-button collapsed text-white accordionHeader"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#category-collapse"
        aria-expanded="true"
        aria-controls="category-collapse" >
        Categorías
      </button>
    </h2>
    <div id="category-collapse" class="accordion-collapse collapse show accordionBody">
      {categories && categories.map((category) => (
          <a href={`/cursos/${category}/`}
             class="text-white tag-filter btn btn-soft-secondary btn-xs rounded-pill m-1"
             data-tag={category}>
            {fromSnakeCase(category)}
          </a>
        ))}
    </div>
  </div>
</aside>
<style>
  .root {
    width: 230px;

    @media (max-width: 991.98px) {
      width: 100%;
    }

    .text {
      font-weight: 600;
      letter-spacing: 0.03125rem;
      text-transform: uppercase;
      line-height: 1.21875rem;
      font-size: 0.8125rem;
      margin-bottom: 1.2rem;
      color: var(--bs-gray-400);
    }

    .accordion {
      border: none;

      margin-bottom: 1.75rem;

      &:last-child {
        margin-bottom: 0;
      }

      .accordionHeader {
        padding: 0;
        margin-bottom: 1rem;
        font-weight: 600;

        &::after {
          width: 1.3rem;
          height: 1.3rem;
          background-size: 1.3rem;
        }

        &:not(.collapsed) {
          background: transparent;
        }
      }

      .accordionBody {
        padding-left: 1.2rem;

      }
    }
  }
</style>
