import './ProfilePhoto.css';
import { Attachment } from 'fhir/r4';
import { Spinner } from "../ui/spinner";
import { usePhotoUrl } from '../../hooks/usePhotoUrl';

interface ProfilePhotoProps {
    photo?: Attachment | null;
    loading?: boolean;
    type?: string;
    size?: 'small' | 'medium' | 'large';
    className?: string;
}

const ProfilePhoto = ({
                          photo,
                          loading = false,
                          type = 'practitioner',
                          size = 'medium',
                          className = ''
                      }: ProfilePhotoProps) => {
    const { url: imageUrl, loading: photoLoading } = usePhotoUrl(photo, type);
    const isLoading = loading || photoLoading;

    return (
        // The TYPE reaches the stylesheet, because a logo and a face want opposite things from the
        // same box: a face is cropped to fill it and a logo must not be cropped at all.
        <div className={`profile-photo profile-photo--${size} profile-photo--type-${type} ${className}`}>
            {isLoading ? (
                <div className="profile-photo__loading">
                    <Spinner />
                </div>
            ) : (
                <img src={imageUrl}
                     alt="Profile"
                     className="profile-photo__image" />
            )}
        </div>
    );
};

export default ProfilePhoto;