<template>
  <header
    class="flex items-center | text-center"
    :style="'--image: url(\'' + inspiration.cover + '\')'"
  >
    <h2
      id="inspiration-title"
      class="inspiration__title | font-serif | text-lg"
      :class="{ new: inspiration.new }"
    >
      {{ inspiration.title }}
    </h2>
    <time
      class="inspiration__date | font-medium | text-sm"
      datatime="2024-04"
      >{{ frenchFormattedDate }}</time
    >
    <p class="inspiration__description">
      {{ inspiration.description }}
    </p>
  </header>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";

const { inspiration } = defineProps({
  inspiration: Object,
});

dayjs.locale("fr");

const frenchFormattedDate = dayjs(inspiration.date).format("MMMM YYYY");
</script>

<style scoped>
.inspiration > header {
  --row-gap: var(--space-8);
  flex-direction: column;
  justify-content: center;
  clear: both;
  height: 15rem; /* 240px */
  background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
    var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-16);
  border-radius: var(--rounded-lg);
}
.inspiration__title.new::after {
  content: "Nouveauté";
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--rounded-sm);
  background-color: var(--color-primary-10);
  color: var(--color-primary-100);
  margin-left: var(--space-16);
  padding: var(--space-4) var(--space-12);
  transform: translateY(-0.1em);
}
.inspiration__date,
.inspiration__description {
  color: var(--color-grey-700);
}
</style>
