<template>
  <div class="row align-items-center">
    <div class="col-md-8">
      <h4 class="mb-0">Commande {{ commandeNumber }}</h4>
    </div>
    <div class="col-md-4 text-end">
      <span class="text-secondary text-sm">
        <i class="fas fa-calendar me-2"></i>{{ formatDate(date) }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  commandeNumber: String,
  date: [String, Date],
});

const formatDate = (dateString) => {
  if (!dateString) return "-";
  return new Date(dateString).toLocaleDateString("fr-FR", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
};
</script>
