---
import { Image } from 'astro:assets';
import Amex from '../../assets/svg/amex.svg';
import MasterCard from '../../assets/svg/mastercard.svg';
import Visa from '../../assets/svg/visa.svg';
import GPay from '../../assets/svg/gpay.svg';
import APay from '../../assets/svg/apple-pay.svg';

import { getPrices } from '../../libs/campaigns';

type Props = {
  course: any;
};

const { course }: Props = Astro.props;
const tier_one = getPrices('price_tier_one', import.meta.env.ASTRO_CURRENCY.toLowerCase());

// const stripePromoCode = `prefilled_promo_code=${course.crmPromoCode}`
// const stripeLocale = `locale=es-419`
// const stripeParams = `?${stripePromoCode}&${stripeLocale}`

---

<div class="bg-secondary card">
  <div class="card-body">
    <div class="mb-2">
      <p class="card-title text-white h1">{import.meta.env.ASTRO_CURRENCY} {tier_one.price}</p>
      <p class="text-white">Incluye {tier_one.discount}% OFF Para Siempre!</p>
    </div>
    <div class="mb-2">
      <div class="text-center">
        <Image class="avatar avatar-xs avatar-4x3 m-2" src={Amex} alt="Logo"/>
        <Image class="avatar avatar-xs avatar-4x3 m-2" src={MasterCard} alt="Logo"/>
        <Image class="avatar avatar-xs avatar-4x3 m-2" src={Visa} alt="Logo"/>
        <Image class="avatar avatar-xs avatar-4x3 m-2" src={GPay} alt="Logo"/>
        <Image class="avatar avatar-xs avatar-4x3 m-2" src={APay} alt="Logo"/>
      </div>
    </div>
    <div class="d-grid mb-2">
      <a class="btn btn-primary btn-transition" href="#">Comprar Ahora</a>
    </div>
    <div class="text-center mb-2">
      <p class="card-text small">Garantía de Devolución (7 días)</p>
    </div>
    <h4 class="text-white card-title">Este curso incluye</h4>
    <ul class="text-white list-unstyled list-py-1">
      <li>
        <i class="bi-card-list nav-icon p-2" />
        {course.modules.length} Módulos
      </li>
      <li>
        <i class="bi-camera-reels nav-icon p-2" />
        {course.modules.length *2 } Videos
      </li>
      <li>
        <i class="bi-file-code nav-icon p-2" />
        {course.modules.length *3 } Practicas
      </li>
      <li>
        <i class="bi-stopwatch nav-icon p-2" />
        Acceso a tiempo completo
      </li>
      <li>
        <i class="bi-phone nav-icon p-2" />
        Acceso en Móviles y Tabletas
      </li>
      <li>
        <i class="bi-award nav-icon p-2" />
        Certificado de Curso
      </li>
    </ul>
  </div>
</div>
