---
import { Image } from 'astro:assets';
import { getPrices } from '../../libs/campaigns';


type Props = {
  course: any;
  slug: string;
};

const { course, slug }: Props = Astro.props;
const tier_one = getPrices('price_tier_one',import.meta.env.ASTRO_CURRENCY.toLowerCase());
---
<div class="root">
  <a href=`/cursos/${slug}/`>
    <figure class="figure">
      <Image
        class="card-img"
        src={`${import.meta.env.ASTRO_ASSETS}/${course.image}`}
        alt={`${course.name} Image Description`}
        width={325}
        height={455}
        />
    </figure>
  </a>
  <div class="body">
    <div class="categories">
      {course.category && <p class="category"> {course.category}</p>
      }
    </div>
    <div class="col">
      <div class="row">
        {course.level === "introductory" && (
          <span class="badge text-white rounded-pill badgeIntro">Introductorio</span>
        )}
        {course.level === "intermediate" && (
          <span class="badge text-white rounded-pill badgeInter">Intermedio</span>
        )}  
        {course.level === "advanced" && (
          <span class="badge text-white rounded-pill badgeAdva">Avanzado</span>
        )}
      </div>
    </div>
  </div>
  <div class="footer">
    <div>
      <span class="currentPrice">{import.meta.env.ASTRO_CURRENCY} {tier_one.price}</span>
    </div>
    <div>
      <span class="oldPrice">{tier_one.discount}% OFF</span>
    </div>
    <a class="btn btn-primary btn-transition button" href=`/cursos/${slug}/`
      >Comprar
    </a>
  </div>
</div>
<style>
  .root {
    background-color: var(--bs-secondary);
    border-radius: 0.5rem;

    .figure {
      // height: auto;

      img {
        border-radius: 0.5rem 0.5rem 0 0;
        // width: 100%;
        // height: auto;
      }
    }

    .body {
      padding: 1rem 1rem 0 1rem;

      .categories {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.5rem;

        .category {
          font-weight: 600;
          letter-spacing: 0.03125rem;
          text-transform: uppercase;
          line-height: 1.21875rem;
          font-size: 0.7125rem;
          color: var(--bs-gray-400);
          margin-bottom: 0;
        }
      }

      .col {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.5rem;

        .row {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          flex-wrap: wrap;
          margin-bottom: 0.5rem;

          .badgeFree {
            width: fit-content;
            background-color: #30CC27;
          }
          .badgeIntro {
            width: fit-content;
            background-color: #4227cc;
          }		
          .badgeInter {
            width: fit-content;
            background-color: #cc27b3;
          }	
          .badgeAdva {
            width: fit-content;
            background-color: #cc2748;
          }												
        }

        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1.2125rem;
          color: var(--bs-white);
          font-weight: 600;
          cursor: pointer;
          margin-bottom: 0;

          &:hover {
            color: var(--bs-primary);
          }

          abbr {
            text-decoration: none;
            cursor: inherit;
          }
        }
      }

      .mentor {
        color: var(--bs-gray-400);
      }
    }

    .footer {
      margin-top: 0rem;
      padding: 0 1.3rem 1.3rem 1.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .oldPrice {
        margin-bottom: 0.2rem;
        font-size: 0.750rem;
        /* text-decoration: line-through; */
        color: var(--bs-gray-400);
      }

      .currentPrice {
        font-size: 1.250rem;
        /* padding: 0 0.125rem 0rem 0.5rem; */
        color: var(--bs-white);
        font-weight: 700;
        margin-bottom: 0;
      }

      .button {
        font-weight: 700;
        font-size: 1.250rem;
        padding-inline: 1rem;
        border-radius: 0.5rem;
      }
    }
  }  
</style>