<template>
  <article class="ressources-card bg-surface-container-lowest border border-outline-variant/10 rounded-xl overflow-hidden shadow-sm transition-shadow hover:shadow-xl">
    <div class="ressources-card__media bg-surface-container-low">
      <img
        v-if="imgSrc"
        :src="imgSrc"
        :alt="imgAlt || title"
        class="h-full w-full object-cover"
      >
      <div
        v-else
        class="flex h-full w-full items-center justify-center bg-surface-container-low text-outline"
        aria-hidden="true"
      >
        <span class="material-symbols-outlined text-5xl">image</span>
      </div>

      <span
        v-if="badge"
        class="absolute left-3 top-3 rounded-md bg-surface px-2.5 py-1 text-xs font-extrabold uppercase text-error shadow-sm"
      >
        {{ badge }}
      </span>
    </div>

    <div class="grid gap-6 p-6">
      <div class="grid gap-3">
        <h3 class="text-xl font-extrabold leading-tight tracking-tight text-primary">
          {{ title }}
        </h3>
        <p
          v-if="description"
          class="text-sm leading-7 text-on-surface-variant"
        >
          {{ description }}
        </p>
      </div>

      <a
        v-if="fileUrl"
        :href="fileUrl"
        :download="downloadName"
        class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
        target="_blank"
        rel="noopener noreferrer"
      >
        <span class="min-w-0">
          <span class="block truncate text-sm font-bold text-primary group-hover:text-on-primary-container">
            {{ fileLabel }}
          </span>
          <span
            v-if="fileSize"
            class="block text-xs text-on-surface-variant group-hover:text-on-primary-container/80"
          >
            {{ fileSize }}
          </span>
        </span>

        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
          <span class="material-symbols-outlined text-xl">download</span>
        </span>
      </a>

      <div
        v-else
        class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
      >
        <span>
          <span class="block text-sm font-bold text-primary">{{ fileLabel }}</span>
          <span
            v-if="fileSize"
            class="block text-xs text-on-surface-variant"
          >
            {{ fileSize }}
          </span>
        </span>
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
          <span class="material-symbols-outlined text-xl">download</span>
        </span>
      </div>
    </div>
  </article>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  title: string
  description?: string
  imgSrc?: string
  imgAlt?: string
  badge?: string
  fileLabel?: string
  fileSize?: string
  fileUrl?: string
  fileName?: string
}>(), {
  description: '',
  imgSrc: '',
  imgAlt: '',
  badge: 'PDF',
  fileLabel: 'Fiche pédagogique (PDF)',
  fileSize: '',
  fileUrl: '',
  fileName: '',
})

const downloadName = computed(() => props.fileName || true)
</script>

<style lang="scss" scoped>
.ressources-card {
  max-width: 392px;
  font-family: 'Inter', sans-serif;
}

.ressources-card__media {
  position: relative;
  aspect-ratio: 392 / 200;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}
</style>
