<!--

-->

<template>

    <v-card
      class="col-md-6 creation-type-container"
      color=""
      :outlined=true
      :href="link"
      @click="$emit('typeClick', 2, type)"
    >
      <div class="row no-gutters" style="height: 100px">
        <div class="flex-grow-0 flex-shrink-0 d-flex justify-center col col-3" style="">
          <div class="icon align-self-center">
            <i :class="icon" aria-hidden="true"></i>
          </div>
        </div>
        <div class="infos-container flex-grow-1 flex-shrink-1 col col-9" style="">
          <h4>{{ $t(title) }}</h4>
          <p>
            {{ $t(textContent) }}
          </p>
        </div>
      </div>
    </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>
.creation-type-container {
  border: none!important;

  .icon {
    i{
      font-size: 50px;
      color: rgb(var(--v-theme-ot-grey, #777777));
    }
  }

  .infos-container {
    padding: 15px 0;

    h4 {
      font-size: 15px;
      color: rgb(var(--v-theme-ot-green, #00AD8E));
      font-weight: bold;
      margin-bottom: 6px;
    }
    p {
      font-size: 13px;
      padding: 0;
      margin: 0;
      color: #767676;
    }
  }

  &>div {
    &:hover {
      cursor: pointer;
      background: rgb(var(--v-theme-ot-light_green, #a9e0d6));
    }
  }
}
</style>
