<script setup lang="ts">

export interface Props {
  title: string,
  description: string,
  call2Action: string,
  link: string,
  icon: string
}

const props = withDefaults(defineProps<Props>(), {
  icon: ''
})

</script>

<template>
  <div class="bg-white p-8 flex justify-between">
    <div>
      <h3 class="mb-4">{{title}}</h3>
      <p class="mb-4">{{description}}</p>
      <router-link
        :to="link"
        class="inline-flex items-center font-normal"
      >
        <span class="inline">{{call2Action}}</span>
        <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
      </router-link>
    </div>
    <div
      v-if="icon"
      :class="[`bg-${icon}`]"
      class="bg-contain bg-no-repeat bg-right w-2/6 -mr-8">
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
