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

import CourseAccordionList from '../../components/course/course-accordion-list.astro';
import CourseAside from '../../components/course/course-card-aside.astro';
import CourseCheckList from '../../components/course/course-check-list.astro';
import CourseHero from '../../components/course/course-hero.astro';
import CourseReviews from '../../components/course/course-reviews.astro';

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

export const getStaticPaths = async () => {
  const allCoursesEntries = getAllCourses();
  return allCoursesEntries.map((entry) => ({
    params: { slug: slugifyCourse(entry.name+'-'+entry.level) },
    props: { entry, slug: slugifyCourse(entry.name+'-'+entry.level) },
  }));
};

const { entry, slug } = Astro.props;
---
<Root 
  title=`Curso ${entry.name} ${fromSnakeCase(entry.level)}`
  description={entry.description}
  path=`/cursos/${slug}/`>
  <Main className="container content-space-t-5" id='cursos'>
    <div class="root left">
      <div class="main">
        <section>
          <CourseHero course={entry} />
        </section>
        <section class="mobileAside">
          <CourseAside course={entry}/> 
        </section>
        <section>
          <CourseCheckList features={entry.features} />
        </section>
        <section>
          <CourseAccordionList course={entry} />
        </section>
        <slot />
        <section>
          <CourseReviews course_id={entry.id} />
        </section>
        </div>
      <aside class="aside">
        <CourseAside course={entry} />
      </aside>
    </div>
  </Main>
</Root>
<style>
  h1,
  h2,
  h3 {
    margin-bottom: 1.5rem;
    color: white;
  }

  h4,
  h5,
  h6 {
    color: white;
  }

  p {
    color: white;
  }  
  .root {
    display: grid;
    gap: 3rem;

    .main {
      section {
        margin-bottom: 5rem;
      }

      .mobileAside {
        display: none;

        @media (max-width: 991.98px) {
          display: block;
        }
      }
    }

    .aside {
      position: sticky;
      top: 200px;
      width: 350px;
      height: fit-content;

      @media (max-width: 991.98px) {
        display: none;
      }
    }    
  }

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

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