/**
 * FEAT-6: Profilfoto — erstes Foto nach sortOrder. Selbstständig ladend.
 * Ohne Foto rendert es `fallback` (oder nichts).
 */
import type { ReactNode } from 'react'
import { listGerbilPhotos, photoSrc, profilePhoto } from '../api/photos'
import { useApi } from '../hooks/useApi'

interface GerbilProfilePhotoProps {
  gerbilId: string
  /** CSS class for the <img> (default: the small detail-header avatar). */
  className?: string
  /** Rendered when the gerbil has no photo yet (e.g. a hero placeholder). */
  fallback?: ReactNode
}

export default function GerbilProfilePhoto({
  gerbilId,
  className = 'profile-photo',
  fallback = null,
}: GerbilProfilePhotoProps) {
  const photos = useApi(() => listGerbilPhotos(gerbilId), [gerbilId])
  const profile = profilePhoto(photos.data ?? [])
  if (!profile) return <>{fallback}</>
  return <img className={className} src={photoSrc(profile)} alt={profile.caption ?? profile.fileName} />
}
