---
/**
 * SocialProof Component
 * Displays avatar circles with supporting trust text
 */
import { cn } from '@/lib/cn';

interface Props {
  /** Array of avatar image URLs (if not provided, shows placeholder circles) */
  avatars?: string[];
  /** Number of placeholder circles to display (only used when avatars not provided) */
  avatarCount?: number;
  /** Trust indicator text */
  text: string;
  /** Size of avatars */
  size?: 'sm' | 'md';
  /** Additional CSS classes */
  class?: string;
}

const {
  avatars,
  avatarCount = 3,
  text,
  size = 'sm',
  class: className,
} = Astro.props;

const sizes = {
  sm: 'h-8 w-8 text-[10px]',
  md: 'h-10 w-10 text-xs',
};

// Use provided avatars or generate placeholder array
const displayAvatars = avatars || Array.from({ length: avatarCount }, () => null);
---

<div class={cn('flex items-center gap-4 text-sm text-foreground-subtle', className)}>
  <div class="flex -space-x-2" role="img" aria-label={`${displayAvatars.length} contributors`}>
    {displayAvatars.map((src, i) => (
      src ? (
        <img
          src={src}
          alt=""
          class={cn(
            'rounded-full border-2 object-cover ring-2 ring-background',
            sizes[size]
          )}
          loading="lazy"
          decoding="async"
        />
      ) : (
        <div
          class={cn(
            'flex items-center justify-center rounded-full border-2 font-bold',
            'border-background bg-border text-foreground-muted',
            sizes[size]
          )}
          aria-hidden="true"
        >
          {i === displayAvatars.length - 1 ? '+' : ''}
        </div>
      )
    ))}
  </div>
  <p>{text}</p>
</div>
