<script setup lang="ts">
import type { Testimonial, PersonalityType } from '~/types/testimonial'

interface Props {
  testimonial: Testimonial
}

const props = defineProps<Props>()

const personalityConfig: Record<PersonalityType, { border: string; avatar: string; badge: string; icon: string }> = {
  sage: {
    border: 'border-emerald-500/30',
    avatar: 'ring-emerald-500',
    badge: 'bg-emerald-500/20 text-emerald-400',
    icon: '🧙',
  },
  sarcastique: {
    border: 'border-purple-500/30',
    avatar: 'ring-purple-500',
    badge: 'bg-purple-500/20 text-purple-400',
    icon: '😏',
  },
  enthousiaste: {
    border: 'border-amber-500/30',
    avatar: 'ring-amber-500',
    badge: 'bg-amber-500/20 text-amber-400',
    icon: '🎉',
  },
  professionnel: {
    border: 'border-sky-500/30',
    avatar: 'ring-sky-500',
    badge: 'bg-sky-500/20 text-sky-400',
    icon: '💼',
  },
}

const config = computed(() => personalityConfig[props.testimonial.personality])

const initials = computed(() => {
  const names = props.testimonial.name.split(' ')
  return names.map(n => n[0]).join('').toUpperCase().slice(0, 2)
})
</script>

<template>
  <article
    class="testimonial-card group relative rounded-xl border bg-sky-dark/50 p-6 transition-all duration-300 hover:bg-sky-dark/70"
    :class="config.border"
  >
    <!-- Personality badge -->
    <span
      class="absolute right-4 top-4 rounded-full px-2 py-1 text-xs font-medium"
      :class="config.badge"
    >
      {{ config.icon }} {{ testimonial.personality }}
    </span>

    <!-- Quote icon -->
    <div class="mb-4 text-4xl text-sky-500/30">"</div>

    <!-- Testimonial text -->
    <blockquote class="mb-6 text-lg italic text-gray-300 leading-relaxed">
      {{ testimonial.text }}
    </blockquote>

    <!-- Author info -->
    <footer class="flex items-center gap-4">
      <!-- Avatar -->
      <div
        v-if="testimonial.avatar"
        class="h-12 w-12 overflow-hidden rounded-full ring-2"
        :class="config.avatar"
      >
        <img
          :src="testimonial.avatar"
          :alt="testimonial.name"
          class="h-full w-full object-cover"
        >
      </div>
      <div
        v-else
        class="flex h-12 w-12 items-center justify-center rounded-full bg-sky-dark ring-2 text-sm font-bold text-sky-400"
        :class="config.avatar"
      >
        {{ initials }}
      </div>

      <!-- Name and role -->
      <div class="flex-1">
        <cite class="block font-semibold text-white not-italic">
          {{ testimonial.name }}
        </cite>
        <div class="text-sm text-gray-400">
          {{ testimonial.role }}
          <template v-if="testimonial.company">
            · {{ testimonial.company }}
          </template>
        </div>
      </div>
    </footer>

    <!-- Project link if available -->
    <NuxtLink
      v-if="testimonial.project"
      :to="`/projets/${testimonial.project.slug}`"
      class="mt-4 inline-flex items-center gap-2 text-sm text-sky-400 transition-colors hover:text-sky-300"
    >
      <span>📁</span>
      <span>{{ testimonial.project.title }}</span>
      <span class="transition-transform group-hover:translate-x-1">→</span>
    </NuxtLink>
  </article>
</template>

<style scoped>
@media (prefers-reduced-motion: no-preference) {
  .testimonial-card {
    transform: translateY(0);
  }

  .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(14, 165, 233, 0.1);
  }
}
</style>
