<template>
  <LayoutContainer>
    <v-row class="center-90">
      <LayoutUISubTitle>
        Découvrez les avantages de la solution
      </LayoutUISubTitle>

      <LayoutUITitle>
        {{ title }}
      </LayoutUITitle>
    </v-row>

    <v-row class="center-90 benefits">
      <v-col v-for="(benefit, index) in benefits" :key="index" cols="12" md="4">
        <CommonCardBenefit :benefit="benefit" />
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type { Benefit } from "~/types/interface";

defineProps({
  benefits: {
    type: Array as PropType<Array<Benefit>>,
    required: true,
  },
  title: {
    type: String,
    required: false,
    default: "Des avantages concrets",
  },
});
</script>

<style scoped lang="scss">
.v-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
