"use client";

import { useState } from "react";
import { initials } from "@/lib/utils";

export function FotoPenduduk({
  pendudukId,
  nama,
  adaFoto,
  versi,
}: {
  pendudukId?: number | null;
  nama?: string | null;
  adaFoto?: boolean;
  /** Nama berkas tersimpan; berganti tiap foto diunggah ulang, dipakai sebagai kunci cache. */
  versi?: string | null;
}) {
  const [gagal, setGagal] = useState(false);

  if (!pendudukId || !adaFoto || gagal) {
    return (
      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary text-xs font-bold text-primary">
        {initials(nama || "-")}
      </div>
    );
  }

  return (
    <img
      src={`/api/backend/penduduk/${pendudukId}/foto${versi ? `?v=${encodeURIComponent(versi)}` : ""}`}
      alt={`Foto ${nama ?? "penduduk"}`}
      loading="lazy"
      className="h-9 w-9 shrink-0 rounded-full object-cover"
      onError={() => setGagal(true)}
    />
  );
}