/* 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 { mdiImageOutline } from '@mdi/js';
import BaseIcon from './BaseIcon';

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

export default function ImageField({
  name,
  image,
  className = '',
  imageClassName = '',
  children,
}: Props) {
  const imageSrc = image && image[0] ? `${image[0].publicUrl}` : '';

  return (
    <div className={className}>
      {imageSrc ? (
        <img
          src={imageSrc}
          alt={name}
          className={`rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-dark-900 ${imageClassName}`}
        />
      ) : (
        <div className={'flex h-full  dark:bg-dark-900/70'}>
          <BaseIcon
            className='text-black dark:text-white'
            w='w-full'
            h='h-full'
            size={54}
            path={mdiImageOutline}
          />
        </div>
      )}

      {children}
    </div>
  );
}