<!-- components/ArticleCard.vue -->
<template>
    <div class="article">
      <NuxtLinkLocale
        :to="link"
        class="article-link"
      >
        <div class="image-wrapper">
          <NuxtImg
            v-if="image?.url"
            :src="image.url"
            provider="strapi"
            :alt="image.alternativeText"
            format="webp"
            class="article-image"
          />
          <div class="overlay">
            <h2>{{ header }}</h2>
          </div>
          <button class="btn mintBtn">{{ readmoreText }}</button>
        </div>
      </NuxtLinkLocale>
    </div>
  </template>
  
  <script setup lang="ts">
  const props = defineProps({
    header: String,
    image: Object,
    link: String,
    readmoreText: {
      type: String,
      default: 'Weiterlesen'
    }
  })
  </script>
  
  <style lang="sass">
  .article
    width: 100%
    max-width: 500px
    border: 1px solid $beige
    background: linear-gradient(to bottom right, white, $lightgrey)
    border-radius: 1rem
    position: relative
    display: flex
    flex-direction: column
    align-items: flex-start
    overflow: hidden
    cursor: pointer
    transition: transform 0.3s ease, opacity 0.3s ease
  
    &:hover
      transform: scale(1.05)
  
  .article-link
    position: relative
    display: block
    color: white
    text-decoration: none
  
  .image-wrapper
    position: relative
    width: 100%
    height: 220px
    border: 1px solid $lightgrey
  
    .article-image
      width: 100%
      min-height: 500px
      object-fit: cover
      border-top-left-radius: 1rem
      border-top-right-radius: 1rem
      opacity: .6
  
    button
      position: absolute
      bottom: .6rem
      right: 0rem
      border: 1px solid $darkgrey
      font-size: 1rem
      box-shadow: 1px 1px 4px 2px rgba(black, .2)
      background-color: lighten($darkgrey, 10%)
      letter-spacing: .05rem
  
  .overlay
    position: absolute
    top: 0
    left: 0
    width: 80%
    height: auto
    min-height: 80%
    background-image: linear-gradient(to bottom right, rgba(darken(white, 0), 1), rgba(darken($beige, 0), 0.9)) 
    margin: 0 20% 7rem 0
    display: flex
    flex-direction: column
    align-items: center
    justify-content: flex-start
    padding: 1rem 3vw
    border-top-left-radius: 1rem
    border-bottom-right-radius: 50%
    box-shadow: 2px 2px 5px 3px rgba(black, .2)
  
    h2
      color: $darkgrey
      font-size: 1rem
      line-height: 140%
      font-family: 'Mainfont-Bold'
      margin: .2rem 0
      hyphens: auto
  </style>
  