<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 lg:pb-8 pb-4 p-8 flex justify-between flex-col lg:flex-row">
    <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 pl-0 pr-3 py-2"
        :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="lg:block bg-contain bg-no-repeat bg-left lg:bg-right h-32 lg:w-2/6 -ml-8 lg:ml-0 lg:-mr-8"
    ></div>
  </div>
</template>

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