/* eslint-disable @next/next/no-img-element */
// Why disabled:
// avatars.dicebear.com provides svg avatars
// next/image needs dangerouslyAllowSVG option for that

import React, { ReactNode } from 'react';
import BaseIcon from './BaseIcon';
import { mdiAccountCircleOutline } from '@mdi/js';

type Props = {
  username: string;
  avatar?: string | null;
  image?: object | null;
  api?: string;
  className?: string;
  children?: ReactNode;
};

export default function UserAvatar({
  username,
  image,
  avatar,
  className = '',
  children,
}: Props) {
  const avatarImage = image && image[0] ? `${image[0].publicUrl}` : '#';

  return (
    <div id='profilEdit' className={className}>
      {avatarImage === '#' ? (
        <BaseIcon
          path={mdiAccountCircleOutline}
          size={30}
          className={
            'dark:text-white dark:hover:text-slate-400 hover:text-black transition-colors'
          }
        />
      ) : (
        <img
          src={avatarImage}
          alt={username}
          className='rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800'
        />
      )}
      {children}
    </div>
  );
}