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

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

const { t } = Astro.props
---

<section id="use-cases" class="use-cases">
  <div class="use-cases__inner">
    <div class="use-cases__copy">
      <div class="section-eyebrow">
        <span class="section-eyebrow__text">{t.eyebrow}</span>
      </div>
      <p class="use-cases__title">
        {t.title}
      </p>
      <p class="use-cases__description">
        {t.description}
      </p>
    </div>

    <div class="use-cases__rows">
      {t.rows.map(row => (
        <div class="use-case-row">
          <div class="use-case-row__title-cell">
            <p class="use-case-row__title">{row.title}</p>
          </div>
          <div class="use-case-row__description-cell">
            <p class="use-case-row__description">{row.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>