<template>
  <div
    class="border-linen flex flex-col items-center gap-6 rounded-lg border bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row md:gap-8 md:p-8"
  >
    <div class="relative">
      <div
        class="h-56 w-36 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105 sm:h-64 sm:w-40 md:h-72 md:w-48"
        :style="{
          'background-image': `url(${cardImage})`,
          '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 rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
      >
        Inversée
      </div>
    </div>

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

<script setup lang="ts">
import { resolveCardImage } from '@/utils/resolveCardImage';
import { computed } from 'vue';

interface Props {
  cardId: number | string;
  assetId?: number | null;
  fallbackIndex?: number;
  name: string;
  imageUrl: string | null;
  orientation?: string;
  description: string;
}

const props = defineProps<Props>();

const cardImage = computed(() =>
  resolveCardImage(
    {
      id: props.cardId,
      asset_id: props.assetId ?? null,
      image_url: props.imageUrl,
    },
    props.fallbackIndex,
  ),
);
</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>
