<script setup lang="ts">
interface Props {
  title: string
  description?: string
  link?: string
  target?: '_self' | '_blank'
}

const props = withDefaults(defineProps<Props>(), {
  target: '_blank',
})

const componentTag = computed((): string => {
  switch (props.target) {
    case '_self':
      return 'AtomsLocaleLink'
    case '_blank':
      return 'a'
    default:
      return 'a'
  }
})

const componentProps = computed(() => {
  if (props.target === '_self') {
    return {
      to: props.link,
    }
  }

  if (props.target === '_blank') {
    return {
      href: props.link,
      target: props.target,
      rel: 'noopener noreferrer',
    }
  }

  return {}
})
</script>

<template>
  <div class="flex items-end justify-between mb-[16px] md:mb-[24px]">
    <h3
      class="text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px] shrink-0"
    >
      <span>{{ props.title }}</span>
    </h3>
    <div class="flex items-center justify-between">
      <slot />
      <p
        v-if="props.description && !props.link"
        class="text-[#666666] text-[13px] font-[400] leading-[22px] tracking-[-0.325px] md:text-[14px] md:leading-[24px] md:tracking-[-0.421px]"
      >
        {{ props.description }}
      </p>
      <component
        :is="componentTag"
        v-else-if="props.description && props.link"
        v-bind="componentProps"
        class="relative flex items-center justify-center gap-[4px] w-auto h-auto text-[#3C75FF] text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-0 before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
      >
        <span>{{ props.description }}</span>
        <AtomsIconsWebLinkLine
          v-if="props.target === '_blank'"
          :size="20"
          color="#3C75FF"
          class="icon"
        />
      </component>
    </div>
  </div>
</template>
