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

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

const isNoImage = computed(() => {
  return !props.imgPath || props.imgPath === null
})
const isShowOverlay = computed(() => {
  return props.title || props.description
})

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

<template>
  <div :class="['card-news', { 'no-image': isNoImage }, props.class]">
    <img
      v-if="props.imgPath"
      :src="props.imgPath"
      :alt="props.title || props.alt"
      class="card-image"
      loading="lazy"
    />
    <span v-else class="card-stove">
      <AtomsIconsStove />
    </span>
    <div v-if="isShowOverlay" 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 || '_self'"
      class="card-link"
      @click="handleLinkClick(props.title)"
    />
  </div>
</template>

<style scoped>
.card-news {
  @apply overflow-hidden relative flex flex-col 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 w-full 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 line-clamp-1 md:text-[18px] 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];
}

.card-stove {
  @apply relative w-full h-full bg-[#333333];
}
.card-stove svg {
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}

.no-image .card-overlay {
  @apply relative bg-[#1f1f1f];
}
</style>
