<template>
  <a
    href="#"
    class="border-primary-lighter group flex justify-between rounded-3xl border border-opacity-40 p-6 transition-colors hover:bg-white"
  >
    <div div class="flex flex-col">
      <div class="text-primary-lighter mb-2 flex items-center text-[0.938rem]">
        <icon icon="calendrier" class="mr-2 h-3 w-3"></icon> {{ formattedDate }}
      </div>
      <div class="flex h-full">
        <div class="mr-3 flex h-full flex-col items-center py-2">
          <div class="bg-secondary h-4 w-4 rounded-full"></div>
          <div
            class="border-primary-lighter grow border-l-4 border-dotted border-opacity-60"
          ></div>
          <div class="bg-ternary h-4 w-4 rounded-full"></div>
        </div>

        <div class="flex flex-col justify-between">
          <div
            class="group-hover:text-primary mb-1 text-[1.25rem] font-semibold uppercase text-white"
          >
            {{ route.origin_city.name }}
          </div>
          <div
            class="group-hover:text-primary text-[1.25rem] font-semibold uppercase text-white"
          >
            {{ route.destination_city.name }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="text-primary-lighter group-hover:text-primary flex -rotate-90 flex-col justify-center text-opacity-40"
    >
      <icon icon="caret-down" class="h-4 w-4"></icon>
    </div>
  </a>
</template>
<script setup>
import { defineProps } from "vue";
const dayjs = useDayjs();

const formattedDate = computed(() => {
  return dayjs(props.route.start_min_at).format("DD/MM/YYYY");
});

const props = defineProps({
  // Définissez vos props ici
  route: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
</script>
