<template>
  <div
      class="grid gap-y-8 gap-x-10
           grid-cols-[repeat(auto-fit,minmax(12rem,1fr))]">

    <div
        v-for="(feat, idx) in features"
        :key="idx"
        class="flex items-start gap-4">

      <UIcon
          :name="`i-lucide-${rt(feat.icon)}`"
          class="w-6 h-6 shrink-0 text-primary-600 mt-0.5"
      />

      <div>
        <h3 class="font-semibold text-neutral-700 leading-tight">
          {{ rt(feat.label) }}
        </h3>
        <p
            v-if="feat.detail"
            class="text-sm text-neutral-600">
          {{ rt(feat.detail) }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Feature {
  icon: string
  label: string
  detail?: string
}

const props = defineProps<{
  features: Feature[]
}>()

const {t, tm, rt} = useVariantData()
</script>
