/**
 * FEAT-6: Profilfoto im Detail-Kopf — erstes Foto nach sortOrder.
 * Selbstständig ladend; rendert nichts, solange es keine Fotos gibt
 * (oder die Foto-Endpunkte noch nicht live sind).
 */
import { listGerbilPhotos, photoSrc, profilePhoto } from '../api/photos'
import { useApi } from '../hooks/useApi'

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