<template>
  <div :class="$style.CustomHomeServiceCard">
    <h3 :class="$style.CustomHomeServiceCardTitle">{{ title }}</h3>

    <div :class="$style.CustomHomeServiceCardLinks">
      <Component v-for="article in articles" :is="!article.disabled && article.link ? VPLink : 'div'"
        v-bind="{ ...(!article.disabled && article.link && { href: article.link }) }"
        :class="[$style.CustomHomeServiceCardLink, { [$style.CustomHomeServiceCardLinkDisabled]: article.disabled || !article.link }]">
        <div :class="$style.CustomHomeServiceCardLinkTitle">
          <div :class="[$style.CustomHomeServiceCardLinkTitleIcon, { [$style.CustomHomeServiceCardLinkTitleIconActive] : article.link && article.icon === 'magic' }]">
            <CustomIcon :icon="(article.icon || 'cloud') as Icons" />
          </div>
          <div :class="[$style.CustomHomeServiceCardLinkTitleText, { [$style.CustomHomeServiceCardLinkTitleTextActive]: article.link }]">
            {{ article.title }}
          </div>
        </div>
        <div :class="$style.CustomHomeServiceCardLinkDescription">
          {{ article.description }}
        </div>
      </Component>
    </div>
  </div>
</template>

<script setup lang="ts">
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
import CustomIcon from './CustomIcon.vue'
import { Icons } from '@beeline/design-tokens/js/iconfont/icons'

export type ServiceArticle = {
  title: string
  description: string
  icon: string
  link?: string
  disabled?: boolean
}

defineProps<{
  title: string
  articles: ServiceArticle[]
}>()
</script>

<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";

.CustomHomeServiceCard {
  background-color: themes.$color-background-secondary;
  border-radius: sizes.$size-border-radius-x6;
  padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;

  &Title {
    @include mixin.h4();
    color: themes.$color-text-active;
    margin-bottom: sizes.$size-spacing-x6;
  }

  &Links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: sizes.$size-spacing-x6;
  }

  &Link {
    $iconRightSpacing: 8px;
    $iconSize: 20px;
    $el: &;

    color: themes.$color-text-active !important;
  
    &Disabled {
      color: themes.$color-text-disabled !important;
    }

    &Title {
      margin-bottom: sizes.$size-spacing-x1;
      display: flex;
      align-items: center;

      &Icon {
        width: $iconSize;
        height: $iconSize;
        margin-right: $iconRightSpacing;

        &Active {
          color: themes.$color-text-link;
        }
      }

      &Text {
        @include mixin.subtitle2;

        &Active:hover {
          color: themes.$color-text-link;
        }
      }

    }

    &Description {
      padding-left: calc($iconSize + $iconRightSpacing);
      color: themes.$color-text-inactive;
      @include mixin.caption;
    }
  }
}
</style>