<script setup lang="ts">
import { withBase } from 'vitepress';
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
import { computed, useCssModule } from 'vue';
import { NAVBAR_HEIGHT } from '../constants'

const { disabled, scrollTo, link } = defineProps<{
  icon: string
  title: string
  link?: string
  scrollTo?: string
  disabled?: boolean
}>()

const style = useCssModule()
const classes = computed(() => ({
  [style.CustomFeature]: true,
  [style.CustomFeatureDisabled]: disabled || !link,
  [style.CustomFeatureWithScroll]: scrollTo && !disabled
}))

const handleClick = (event: Event) => {
  if (scrollTo) {
    const targetElTop = document.querySelector(scrollTo)?.getBoundingClientRect().top

    if (targetElTop) {
      event.stopPropagation()
      window.scrollTo({ behavior: 'smooth', top: targetElTop + window.scrollY - NAVBAR_HEIGHT - 32 })
    }
  }
}
</script>

<template>
  <Component :is="!disabled && link ? VPLink : 'article'" v-bind="{ ...(!disabled && link && { href: link }) }"
    :class="classes" @click="handleClick">
    <figure :class="$style.CustomFeatureImage">
      <img :src="withBase(`img/features/${icon}.svg`)" :alt="title">
    </figure>
    <div :class="$style.CustomFeatureContent">
      <h2 :class="$style.CustomFeatureTitle">
        {{ title }}
      </h2>
    </div>
  </Component>
</template>

<style lang="scss" module>
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
@use "@beeline/design-tokens/scss/tokens/themes";
@use "@beeline/design-tokens/scss/mixin";

.CustomFeature {
  $el: &;
  border-radius: sizes.$size-border-radius-x6;
  border: 1px solid themes.$color-border;
  max-width: 344px;

  &WithScroll {
    cursor: pointer;
  }

  &Image {
    background-color: themes.$color-background-secondary;
    border-top-left-radius: sizes.$size-border-radius-x6;
    border-top-right-radius: sizes.$size-border-radius-x6;

    img {
      margin: 0 auto;
      width: 200px;
      height: 200px;
    }
  }

  &Content {
    padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
  }

  &Title {
    @include mixin.h4;
    color: themes.$color-text-active;

    #{$el}Disabled & {
      color: themes.$color-text-disabled;
    }

    #{$el}WithScroll & {
      color: themes.$color-text-active;
    }
  }
}
</style>
