import React, { ComponentPropsWithoutRef, useContext, useEffect } from 'react';
import { Utils } from '../../../utils/util';
import { NJAvatarContext } from '../NJAvatar.context';

export const NJAvatarPicture = React.forwardRef<HTMLImageElement, NJAvatarPictureProps>(
  ({ className, ...htmlProps }, forwardedRef) => {
    const context = useContext(NJAvatarContext);

    useEffect(() => {
      if (context) {
        context.setHasContent(true);
      }
    }, []);

    const imgClassName = Utils.classNames(className, 'nj-avatar__picture');
    return <img className={imgClassName} ref={forwardedRef} alt={context?.label} {...htmlProps} />;
  }
);

NJAvatarPicture.displayName = 'NJAvatarPicture';

export type NJAvatarPictureProps = ComponentPropsWithoutRef<'img'>;