---
import type { Translations } from '../i18n/translations'

export interface Props {
  t: Translations['experience']
}

const { t } = Astro.props
const images = ["/assets/exp-card-1.png", "/assets/exp-card-2.png", "/assets/exp-card-3.png"]
const imageClasses = ['experience-card__image--one', 'experience-card__image--two', 'experience-card__image--three']
---

<section id="experience" class="experience">
  <div class="experience__inner">
    <div class="experience__heading">
      <p class="experience__title">
        {t.title}
      </p>

      <p class="experience__caption">
        {t.caption}
      </p>
    </div>

    <div class="experience__body">
      <div class="experience__grid">
        {t.cards.map((card, index) => (
          <div class="experience-card">
            <div class={`experience-card__media ${index > 0 ? 'experience-card__media--tinted' : ''}`}>
              <div class="experience-card__media-crop">
                <img
                  alt={card.alt}
                  class={`experience-card__image ${imageClasses[index]}`}
                  src={images[index]}
                />
              </div>
            </div>
            <div class="experience-card__copy">
              <p class="experience-card__title">{card.title}</p>
              <p class="experience-card__description">{card.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>