<script setup>
import { computed } from 'vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  src: String,
  alt: String,
  fallback: String,
  size: {
    type: String,
    default: 'default',
    validator: (v) => ['sm', 'default', 'lg'].includes(v)
  },
  class: String
});

const sizeClasses = {
  sm: 'size-8 text-xs',
  default: 'size-10 text-sm',
  lg: 'size-12 text-base'
};

const classes = computed(() => cn(
  'relative flex shrink-0 overflow-hidden rounded-full',
  sizeClasses[props.size],
  props.class
));

// Generate initials from fallback text
const initials = computed(() => {
  if (!props.fallback) return '?';
  return props.fallback
    .split(' ')
    .map(word => word[0])
    .join('')
    .toUpperCase()
    .slice(0, 2);
});
</script>

<template>
  <span :class="classes">
    <img
      v-if="src"
      :src="src"
      :alt="alt"
      class="aspect-square size-full object-cover"
    />
    <span
      v-else
      class="flex size-full items-center justify-center rounded-full bg-pink-400/20 text-pink-400 font-semibold border border-pink-400/30"
    >
      {{ initials }}
    </span>
  </span>
</template>
