<script setup lang="ts">
import RichText from "@/components/ui/RichText.vue";

export interface Props {
  title: string;
  description: string;
  call2Action: string;
  link: string;
  iconUrl?: string;
  externalLink?: boolean;
}

withDefaults(defineProps<Props>(), {
  iconUrl: "",
  externalLink: false,
});
</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>
      <RichText class="mb-4" :content="description" />
      <a
        v-if="externalLink"
        :href="link"
        target="_blank"
        class="btn-text inline-flex items-center py-2 pl-0 pr-3"
      >
        <span class="inline">{{ call2Action }}</span>
        <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
      </a>
      <router-link
        v-else
        :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="iconUrl" class="flex justify-end lg:w-2/6">
      <img :src="iconUrl" class="w-full lg:w-48" alt="icon" />
    </div>
  </div>
</template>

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