<template>
  <div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
    <img 
      v-if="src" 
      :src="src" 
      alt="Person"
      class="w-full h-full object-cover"
      loading="lazy"
    />
    <span v-else-if="loading" class="text-gray-500 text-xs">...</span>
    <svg v-else class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getPersonThumbnail } from '@/api/client'

const props = defineProps<{
  personId: string
  videoUuid?: string
}>()

const src = ref('')
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    src.value = await getPersonThumbnail(props.personId)
  } catch (e) {
    console.error('Failed to load thumbnail', e)
  } finally {
    loading.value = false
  }
})
</script>
