---
import { Image } from 'astro:assets';
import { fromSnakeCase } from '../../utils';

type Props = {
  course: any;
};

const { course }: Props = Astro.props;
---

<div>
  <div>
    <h1 class="text-white mb-3">
      {course.name} - {fromSnakeCase(course.level)}
    </h1>
    <p>{course.description}</p>

    <div class="d-flex align-items-center flex-wrap">
      <div class="d-flex align-items-center me-4">
        <div class="flex-shrink-0 avatar-group avatar-group-xs">
          {course.user_created.avatar && (
            <figure class="avatar avatar-xs avatar-circle">
              <Image 
                class="avatar-img"
                src={`${import.meta.env.ASTRO_ASSETS}/${course.user_created.avatar}`}
                alt={`${course.user_created.first_name} Avatar`}
                width={40}
                height={40}
                />
            </figure>
          )}
        </div>
        <div class="flex-grow-1">
            <span class="ps-2 text-white">
              Creado por
              <a class="link text-white" target="_blank" href={course.user_created.url}>
                {course.user_created.first_name} {course.user_created.last_name}
              </a>
            </span>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-3">
    <h3>Incluido en Carreras:</h3>
  </div>
  <div class="d-flex gap-2 mt-3">
    {course.codyops_careers.map((career: any) => (
      <a class="btn btn-outline-success mb-1" href={`/carreras/${career.codyops_careers_id.slug}/`}>
      {career.codyops_careers_id.name}
      </a>
    ))}
  </div>
</div>
<style>
  h1,
  h2,
  h3 {
    margin-bottom: 1.5rem;
    color: white;
  }

  h4,
  h5,
  h6 {
    color: white;
  }

  p {
    color: white;
  }
</style>
