<template>
  <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
    <div
      v-if="imageFilename"
      class="mb-4 flex justify-center"
    >
      <img
        :src="`/api/personen/${imageFilename}?width=200&height=200`"
        :alt="`${title}: ${name}`"
        class="w-32 h-32 object-cover rounded-full border-4 border-primary-100 shadow-md"
        loading="lazy"
      >
    </div>
    <h3
      v-if="title"
      class="text-xl font-display font-bold text-gray-900 mb-2"
    >
      {{ title }}
    </h3>
    <h4 class="text-lg font-semibold text-primary-600 mb-3">
      {{ name }}
    </h4>
    <div class="space-y-1 text-gray-600">
      <slot />
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    required: true
  },
  imageFilename: {
    type: String,
    default: null
  }
})
</script>

