<script setup lang="ts">
export interface Props {
  title: string;
  description: string;
  call2Action: string;
  link: string;
  icon?: string;
}

withDefaults(defineProps<Props>(), {
  icon: "",
});
</script>

<template>
  <div class="flex flex-col justify-between bg-white p-8 pb-4 lg:flex-row lg:pb-8">
    <div class="mb-4 lg:mb-0">
      <h3 class="mb-4">{{ title }}</h3>
      <p class="mb-4">{{ description }}</p>
      <router-link
        :to="link"
        class="btn-text inline-flex items-center py-2 pl-0 pr-3"
        :data-cy="`${title}-link`"
      >
        <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="-ml-8 h-32 bg-contain bg-left bg-no-repeat lg:-mr-8 lg:ml-0 lg:block lg:w-2/6 lg:bg-right"
    ></div>
  </div>
</template>

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