---
import { getAllCourses, getUniqueCategories, filterCoursesByCategory } from '../../libs/courses';
import { slugifyCourse, fromSnakeCase } from '../../utils/text';

import Root from '../../layouts/Root.astro';
import Main from '../../layouts/Bundle.astro';

import Aside from '../../components/course/course-aside.astro';
import CourseCard from '../../components/course/course-card.astro';

export async function getStaticPaths() {
  const allCoursesEntries = getAllCourses();
  const uniqueCategories = getUniqueCategories(allCoursesEntries);

  return uniqueCategories.map((category: any) => ({
    params: { category: category },
    props: { category }
  }));
}

const { category } = Astro.props;
const courses = filterCoursesByCategory(getAllCourses(), category);
---

<Root title=`Cursos de ${fromSnakeCase(category)}`
  description=""
  path=`/cursos/${category}/`>
  <Main className="container content-space-t-5" id='cursos'>
    <div class="root left">
      <Aside />
      <main class="main">
        {courses && courses.length > 0 && (
          <div class="container">
            <div class="header">
              <h1 class="text-white fs-2 mb-0">Cursos de {fromSnakeCase(category)}</h1>
            </div>
            <div class="grid">
                {courses.map((course: any) => (
                    <CourseCard course={course} slug={slugifyCourse(course.name+'-'+course.level)}/>
                ))}
            </div>
          </div>
        )}
      </main>       
    </div>
  </Main>
</Root>

<style>
  .root {
    display: grid;
    gap: 3rem;

    .main {
      display: grid;
      gap: 3rem;

      button:is(:disabled) {
        opacity: 0.2;
      }

      .container {
        display: grid;
        overflow-x: hidden;

        .header {
          display: flex;
          align-items: center;
          gap: 1rem;
          justify-content: space-between;
          margin-bottom: 2.1rem;

          .controls {
            display: flex;
            align-items: center;
            gap: 1rem;

            .button {
              background-color: transparent;
              display: block;
              border: none;
              padding: 0.3rem 0.6rem;

              path {
                opacity: 1;
                fill: white;
              }
            }
          }
        }
      }
      .grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
          gap: 1.25rem;
          margin-bottom: 4rem;
        }        
    }
  }

  .left {
    grid-template-columns: auto 1fr;

    @media (max-width: 991.98px) {
      grid-template-columns: 1fr;
    }
  }
</style>
