﻿<template>
  <v-card class="shadow-lg rounded-lg overflow-hidden max-w-sm">
    <v-img :src="creator.imageUrl" class="w-full h-48 object-cover"></v-img>
    <v-card-title class="text-lg font-bold">{{ creator.name }}</v-card-title>
    <v-card-subtitle class="text-sm text-gray-500">{{ creator.title }}</v-card-subtitle>
    <v-card-text class="text-base text-gray-700">{{ creator.description }}</v-card-text>
  </v-card>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  creator: {
    type: Object,
    required: true,
    validator: (profile) => {
      return 'image' in profile && 'name' in profile && 'title' in profile && 'description' in profile;
    }
  }
});
</script>