<template>
  <DsCard class="concert-card">
    <div class="concert-card__grid">
      <!-- Image -->
      <div class="concert-card__media">
        <NuxtLink v-if="href" :to="href" class="concert-card__link">
          <DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
        </NuxtLink>
        <div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
      </div>

      <!-- Content -->
      <div class="concert-card__content">
        <NuxtLink v-if="href" :to="href" class="concert-card__link">
          <DsHeading as="h4" tone="default" class="concert-card__title">
            {{ title }}
          </DsHeading>
        </NuxtLink>

        <!-- Meta : date + lieu -->
        <div class="concert-card__meta">
          <DsHeading as="h5" tone="default">
            {{ lieu }}
          </DsHeading>
          <DsHeading as="h6" tone="default">
            <time :datetime="dateISO">{{ dateLabel }}</time>
          </DsHeading>
        </div>

        <!-- Description -->
        <DsText as="p" tone="default" :clamp="3" class="concert-card__description">
          {{ description }}
        </DsText>

        <!-- Actions -->
        <div class="concert-card__actions">
          <DsButtonArrow :to="`${href}`" variant="secondary">
            Découvrir
          </DsButtonArrow>
          <DsButton :href="`${lien_billetterie_representation}`" variant="third" size="xs" class="concert-card__actions--reserver" target="_blank" rel="noopener noreferrer">
            Réserver
          </DsButton>
        </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'
  import DsButton from '@root/design-system/primitives/DsButton.vue'


  defineProps({
    id: { type: [String, Number], required: true },
    title: { type: String, required: true },
    lieu: { type: String, default: '' },
    dateISO: { type: String, required: true },      // ex: "2026-01-15T20:00:00+01:00"
    dateLabel: { type: String, required: true },    // ex: "Jeu. 15 jan. 2026 — 20h"
    lien_billetterie_representation: { type: String, default: '' },
    description: { type: String, default: '' },
    imageUrl: { type: String, default: '' },
    imageAlt: { type: String, default: '' },
    href: { type: String, default: '' },
  })
</script>

<style lang="scss">

  .concert-card__grid {
    display: grid;
    gap: var(--sp-16);
    align-items: start;
  }

  .concert-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.04);
    overflow: hidden;

    .ds-media,
    .musicien_card_media-placeholder {
      width: 100%;
      height: 100%;
    }
  }

  .concert-card__content {
    display: grid;
    gap: var(--sp-4);
    max-width: 518px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .concert-card__link:hover,
  .concert-card__link:focus-visible {
    color: var(--c-brand_rouge) !important;
    .ds-heading--default {
      color: var(--c-brand_rouge) !important;
    }
  }
  .concert-card__meta {
    margin-top: calc(var(--sp-4) * -1);
  }
  .concert-card__description {
    margin-top: 3px;
    margin-bottom: 4px;
  }
  .concert-card__actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &--reserver {
      margin-right: 5px;
    }
  }

</style>
