<template>
  <DsCard class="rounded-card">
    <div class="rounded-card__grid">
      <!-- Image -->
      <div class="rounded-card__media">
        <DsMedia :src="imgSrc" :alt="imgAlt" :ratio="ratio" />
      </div>

      <!-- Content -->
      <div class="rounded-card__content">
        <NuxtLink v-if="url" :to="url" class="rounded-card__title-link">
          <DsHeading as="h5" tone="default" class="rounded-card__title">
            {{ title }}
          </DsHeading>
        </NuxtLink>
        <DsHeading v-else as="h5" tone="default" class="rounded-card__title">
            {{ title }}
        </DsHeading>
        <!-- Description -->
        <DsText as="p" tone="default" :clamp="3" class="rounded-card__description">
          {{ description }}
        </DsText>

      </div>
    </div>
  </DsCard>
</template>

<script setup>
  import DsCard from '@root/design-system/components/DsCard.vue'
  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
  import DsText from '@root/design-system/primitives/DsText.vue'
  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'


  defineProps({
    id: { type: [String, Number], required: true },
    title: { type: String, required: true },
    url: { type: String, required: true },
    description: { type: String, default: '' },
    imgSrc: { type: String, default: '' },
    imgAlt: { type: String, default: '' },
    ratio: { type: String, default: 'square' },
  })
</script>

<style lang="scss">
  .rounded-card {
    padding: 16px;
    box-shadow: 0px -1px 20px rgba(0, 0, 0, 0.18);

    .rounded-card__grid {
      display: grid;
      align-items: start;
    }

    .rounded-card__content {
      display: grid;
      gap: var(--sp-6);
      max-width: 518px;
      padding-left: 22px;
      padding-right: 20px;
      padding-top: 13px;
      padding-bottom: 10px;
      background: white;
      max-width: 85%;
      justify-self: center;
      position: relative;
      margin-top: -7px;
      border-radius: 20px;
    }

    .rounded-card__meta {
      margin-top: calc(var(--sp-4) * -1);
    }
    .rounded-card__title {
      text-transform: uppercase;
    }
    .rounded-card__title-link {
      color: inherit;
      text-decoration: none;
    }

    .rounded-card__title-link:hover,
    .rounded-card__title-link:focus-visible {
      color: var(--c-brand_rouge) !important;
      .ds-heading--default {
        color: var(--c-brand_rouge) !important;
      }
    }

    .rounded-card__actions {
      margin-top: auto;
    }

    .rounded-card__media {
      .ds-media {
        background: white !important;
      }
      img {
        border-radius: 20px;
      }
    }
  }
</style>
