<!--
  VCard proposant une option dans la boite de dialogue "Assistant de création"
-->

<template>
  <v-card
    class="col-md-6"
    color=""
    flat
    border="solid 1px"
    :href="link"
    @click="$emit('typeClick', 2, type)"
  >
    <v-row no-gutters style="height: 100px">
      <v-col cols="3" class="flex-grow-0 flex-shrink-0 d-flex justify-center">
        <v-icon
            :icon="icon"
            size="50"
            class="ma-2 pa-2 align-self-center text-neutral-strong"
        />
      </v-col>
      <v-col
          cols="9"
          align-self="center"
          class="pl-2 infos-container flex-grow-1 flex-shrink-1"
      >
        <h4 class="text-primary">{{ $t(title) }}</h4>
        <p class="text-neutral-strong">
          {{ $t(textContent) }}
        </p>
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup lang="ts">
  const props = defineProps({
    title: {
      type: String,
      required: true
    },
    textContent: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    link: {
      type: String,
      required: false
    },
    type: {
      type: String,
      required: false
    }
  })
</script>

<style lang="scss" scoped>
  h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  p {
    font-size: 13px;
  }

  .infos-container {
    padding: 15px 0;
  }

  .v-card:hover {
    cursor: pointer;
    background: rgb(var(--v-theme-primary-alt));
  }
</style>
