<template>
  <Link
    :href="pageLink"
    :inline="false"
    class="home-action-card-container p-m"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  >
    <div v-bind="getAttrs($attrs)">
      <img :src="icons[iconName][hover ? 'hover' : 'default']" class="mb-m" />

      <h2 class="title-card-action">
        {{ title }}
      </h2>
    </div>
  </Link>
</template>

<script>
import { formatHref } from '@inside-library/helpers/Langs'
import { getAttrs } from '@inside-library/helpers/Attrs'

import { Link } from 'inside-collection/components'

import iconContribute from '../../../assets/img/icons/I-contribute.svg'
import iconHoverContribute from '../../../assets/img/icons/hover/I-contribute.svg'
import iconDiscoverAll from '../../../assets/img/icons/I-discover-all-internal-news.svg'
import iconHoverDiscoverAll from '../../../assets/img/icons/hover/I-discover-all-internal-news.svg'
import iconSubsidiariesNews from '../../../assets/img/icons/I-discover-the-news-of-the-subsidiaries.svg'
import iconHoverSubsidiariesNews from '../../../assets/img/icons/hover/I-discover-the-news-of-the-subsidiaries.svg'
import iconResearch from '../../../assets/img/icons/I-research.svg'
import iconHoverResearch from '../../../assets/img/icons/hover/I-research.svg'

export default {
  name: 'ActionCard',
  components: {
    Link
  },
  props: {
    title: {
      type: String,
      required: true
    },
    to: {
      type: Object
    },
    iconName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      hover: false
    }
  },
  computed: {
    pageLink() {
      return formatHref(this.to, this.$_currentLang)
    },
    icons() {
      return {
        'I-contribute': {
          default: iconContribute,
          hover: iconHoverContribute
        },
        'I-discover-all-internal-news': {
          default: iconDiscoverAll,
          hover: iconHoverDiscoverAll
        },
        'I-discover-the-news-of-the-subsidiaries': {
          default: iconSubsidiariesNews,
          hover: iconHoverSubsidiariesNews
        },
        'I-research': {
          default: iconResearch,
          hover: iconHoverResearch
        }
      }
    }
  },
  methods: {
    getAttrs
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.home-action-card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;

  border-radius: var(--radius-s);
  border: 1px solid var(--color-primary);
  background-color: var(--color-light);
  color: var(--color-primary);
  text-align: center;
  box-shadow: unset;
  cursor: pointer;

  &:hover {
    box-shadow: var(--shadow-hover);
    background-color: var(--color-primary);
    color: var(--color-light);
  }

  @include transition(all 0.3s);

  @include tablet {
    height: 90%;
  }
}
</style>
