<script setup lang="ts">
interface Props {
  title: string
  description: string | number
  imgPath: string
  linkTarget?: string
  url?: string
  alt?: string
  class?: string
}

const props = defineProps<Props>()
const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

const handleLinkClick = (title: string) => {
  const trackingData = {
    tracking: {
      click_item: title,
      action_type: 'click',
      click_sarea: '',
    },
  }
  sendLog(locale.value, useAnalyticsLogDataDirect(trackingData, 1))
}
</script>

<template>
  <div
    v-if="props.title || props.description"
    :class="`card-news ${props.class || ''}`"
  >
    <img
      :src="props.imgPath"
      :alt="props.title || props.alt"
      class="card-image"
      loading="lazy"
    />
    <div class="card-overlay">
      <h3 v-if="props.title" class="card-title">
        {{ props.title }}
      </h3>
      <p v-if="props.description" class="card-description">
        {{ props.description }}
      </p>
    </div>
    <a
      v-if="props.url"
      :href="props.url"
      :target="props.linkTarget"
      class="card-link"
      @click="handleLinkClick(props.title)"
    />
  </div>
</template>

<style scoped>
.card-news {
  @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
  after:border after:border-white/10 after:rounded-lg;
}
.card-image {
  @apply transition-transform duration-300 w-full h-full object-cover;
}
.card-overlay {
  @apply absolute bottom-0 left-0 right-0 pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] text-left md:px-[26px] md:pb-[26px];
}
.card-title {
  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
}
.card-description {
  @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
}
.card-link {
  @apply absolute top-0 left-0 w-full h-full z-[5];
}
</style>
