import type { Attachment } from 'fhir/r4';
import { InboxAvatar } from '../MessagesPage/InboxRow.tsx';
import { usePhotoUrl } from '../../../hooks/usePhotoUrl.ts';
import { getFhirPhotoUrl } from '../../../utils/fhirPhoto.ts';
import './PatientMark.css';

// The patient's photograph when there is one, otherwise their initials. The stock silhouette the photo
// hook falls back to belongs to nobody, so it is never passed on.
const PatientPhotoMark = ({ name, photo }: { name: string; photo: Attachment }) => {
  const { url, loading } = usePhotoUrl(photo, 'patient');
  const real = !loading && url !== getFhirPhotoUrl(null, 'patient') ? url : undefined;
  return <InboxAvatar label={name} imageUrl={real} tone="patient" />;
};

export const PatientMark = ({ name, photo }: { name: string; photo?: Attachment }) =>
  photo ? <PatientPhotoMark name={name} photo={photo} /> : <InboxAvatar label={name} tone="patient" />;

export default PatientMark;