<template>
  <div class="card | physical-sample" v-if="step.files.length > 0">
    <header
      class="text-center rounded-lg p-32"
      :style="'--cover: url(' + step.cover + ')'"
    >
      <h3 class="text-lg font-serif">
        <router-link :to="'/' + step.uri" class="link-full">{{
          step.title
        }}</router-link>
      </h3>
      <time
        class="card__date | font-medium text-sm py-8"
        :datetime="dayjs(step.date).format('YYYY-M-DD')"
        >{{ dayjs(step.date).format("DD MMMM YYYY") }}</time
      >
      <p>{{ step.description }}</p>
    </header>
    <img
      :src="step.files[0].url"
      alt=""
      loading="lazy"
      class="rounded-lg mt-16"
    />
  </div>
</template>
<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";

const { step } = defineProps({ step: Object });
</script>
