<script setup lang="ts">
withDefaults(defineProps<{
  to: string;
  fullName: string;
  avatarSrc?: string;
  initials?: string;
  metaLabel?: string;
  metaValue?: string;
}>(), {
  avatarSrc: '',
  initials: 'FR',
  metaLabel: '',
  metaValue: '',
});
</script>

<template>
  <NuxtLink
    :to="to"
    class="surface-card surface-card-interactive flex flex-col items-center rounded-[32px] p-6 text-center"
  >
    <img
      v-if="avatarSrc"
      :src="avatarSrc"
      :alt="fullName"
      class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
    >
    <div
      v-else
      class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
    >
      {{ initials }}
    </div>

    <h2 class="mt-8 text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>

    <div
      v-if="metaValue"
      class="mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border border-[#e1c15a] bg-[#fff8dc] px-4 py-2 text-sm text-[#7a5b00]"
    >
      <span v-if="metaLabel" class="font-semibold">{{ metaLabel }}</span>
      <span class="font-bold text-[#123824]">{{ metaValue }}</span>
    </div>
  </NuxtLink>
</template>
