<template>
  <DsCard class="textleft-card">
    <div class="textleft-card__grid">
      <!-- Content -->
      <div class="textleft-card__content">
        <DsHeading as="h5" tone="default" class="textleft-card__title">
          {{ title }}
        </DsHeading>
        <!-- Description -->
        <DsText as="p" tone="default" :clamp="3" class="textleft-card__description">
          {{ description }}
        </DsText>
        
        <!-- Actions -->
        <div class="concert-card__actions">
          <DsButtonArrow :to="`#`" variant="secondary">
            Découvrir
          </DsButtonArrow>
        </div>

      </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: '' },
  })
</script>

<style lang="scss">

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

  .textleft-card__content {
    display: grid;
    gap: var(--sp-6);
    max-width: 518px;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 3px;
    background: white;
    border-left: 2px solid;
    &:hover {
      border-left-color: var(--c-brand_rouge);
    }
  }

  .textleft-card__meta {
    margin-top: calc(var(--sp-4) * -1);
  }
  .textleft-card__description {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .textleft-card__actions {
    margin-top: auto;
  }

</style>