---
import { Accordion, CareerCourse } from '../../../types';
import { toSnakeCase } from '../../../utils';

type Props = {
  href: string;
  list?: Accordion[];
  download?: string;
};

const { href, list, download }: Props = Astro.props;
---

<section id="program" class="container content-space-t-3 career__section">
	<h2 class="career-subtitle text-white text-center mb-5">Programa de Carrera</h2>
  <div class="accordion accordion-btn-icon-start">
    {list && list.map(({children, hours, title}: Accordion) => (
      <div class="accordion-item">
        <div class="accordion-header" id="headingBasics1">
          <a
            class="accordion-button collapsed"
            id="collab&produc_devopspage"
            role="button"
            data-bs-toggle="collapse"
            data-bs-target=`#${toSnakeCase(title)}`
            aria-expanded="true"
            aria-controls={toSnakeCase(title)}
          >
            <div class="flex-grow-1 ps-3">
              <div class="row">
                <div class="col-8 text-white">{title}</div>
                <!-- End Col -->

                <div class="col-4 text-end">
                  <div class="row">
                    <div class="col-lg-6"></div>
                    <!-- End Col -->

                    <div class="col-lg-6">
                      <span class="small text-muted fw-normal">{hours}</span>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Col -->
              </div>
              <!-- End Row -->
            </div>
          </a>
        </div>
          <div id={toSnakeCase(title)} class="accordion-collapse collapse" aria-labelledby="headingBasics1">
          <div class="accordion-body" style='margin-top: 1rem;'>
            <!-- List Group -->
            <div class="list-group list-group-flush list-group-no-gutters">
              {
                children && children.map(({courseLevel, hours, title}: CareerCourse)=>(
                  <div class="list-group-item text-muted">
                    <div class="row">
                      <div class="col-8">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <i class="bi bi bi-arrow-right"></i>
                          </div>
                          <div class="flex-grow-1 ms-2">
                      <span class="small text-white"
                      >{title}
                        <span class="badge bg-course text-dark rounded-pill ms-1">{courseLevel}</span></span
                      >
                          </div>
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-4 text-end">
                        <div class="row">
                          <div class="col-lg-6"></div>
                          <!-- End Col -->

                          <div class="col-lg-6">
                            <span class="small">{hours}</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Col -->
                    </div>
                  </div>
                ))
              }

            </div>
            <!-- End List Group -->
          </div>
        </div>
      </div>
    ))}

    <div class="container text-center mt-5">
      <a
        class="btn btn-primary btn-transition fw-bold"
        id="downloadprogram_devopspage"
        href={href}
        style="border-radius: 0.9rem"
				download={download}
        >Descargar Programa Completo
      </a>
    </div>
  </div>
</section>
