<script setup lang="ts">
import type { Features } from "~/types/Features";

const props = defineProps<{
  featureData: Features[];
}>();
</script>
<template>
  <div
    class="bg-surface-background mt-7 grid gap-4 gap-y-[80px] rounded-2xl p-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
  >
    <div
      v-for="feature in props.featureData"
      :key="feature.id"
      class="flex flex-col items-center justify-center gap-4"
    >
      <component :is="feature.icon" />
      <p class="max-w-[280px] text-center text-sm">{{ feature.content }}</p>
    </div>
  </div>
</template>
<style scoped></style>
