---
import Root from '../../layouts/Root.astro';
import Main from '../../layouts/Bundle.astro';
import CareerProgram from '../../sections/global/career-program/career-program.astro';
import CareerSection from '../../sections/global/career-section/career-section.astro';
import Cta from '../../sections/global/cta/cta.astro';
import { getCareers } from '../../libs/careers';
import type { Careers } from '../../types/codyops-careers';
import { Image } from 'astro:assets';

export async function getStaticPaths() {
  const careers = await getCareers();

  return careers.map((career: Careers) => {
    return {
      params: { slug: career.slug },
      props: { career },
    };
  });
}

interface Props {
  career: Careers;
}

const { career } = Astro.props;

// Dynamically import the description and features components based on the slug
const DescriptionComponent = (await import(`../../sections/${career.slug}/${career.slug}-description.astro`)).default;
const FeaturesComponent = (await import(`../../sections/${career.slug}/${career.slug}-features.astro`)).default;
---

<Root
  title={`Carrera ${career.name}`}
  description={career.description}
  path={`/${career.slug}/`}>
  <Main className=''>
    <section id="featureSection" class="content-space-t-4">
      <div class="banner py-10 position-relative">
        <figure class="banner__background-container-image">
          <div class="overlay"></div>
          <Image src={`${import.meta.env.ASTRO_ASSETS}/${career.banner}`} alt={`${career.name} image`} width={1920} height={475} />
        </figure>
        <FeaturesComponent />
      </div> 
    </section>
    <CareerSection>
      <DescriptionComponent />
    </CareerSection>
    <Cta />
    <CareerProgram career={career} />
    <Cta />
  </Main>
</Root>