<template>
  <div
    class="border-linen flex flex-col items-center gap-6 md:gap-8 rounded-lg border bg-white p-6 md:p-8 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row"
  >
    <!-- Card Image -->
    <div class="relative">
      <div
        class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
        :style="{
          'background-image': `url(/cards/${cardNumber + 1}.png)`,
          'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
          transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
        }"
      ></div>
      <div
        v-if="orientation === 'reversed'"
        class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full"
      >
        Inversée
      </div>
    </div>

    <!-- Card Content -->
    <div class="flex flex-col gap-3 text-center md:text-left">
      <p class="text-spiritual-earth text-xs sm:text-sm tracking-widest uppercase font-semibold">
        Carte {{ cardNumber }}
      </p>
      <h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
        {{ name }}
      </h3>
      <div class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed" v-html="description">

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  cardNumber: number;
  name: string;
  imageUrl: string;
  orientation?: string;
  description: string;
}

defineProps<Props>();
</script>

<style scoped>
div {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
