import React, { ReactNode } from 'react';
import Image from 'next/image';
import { mdiImageOutline } from '@mdi/js';
import BaseIcon from './BaseIcon';

type Props = {
  name: string;
  image?: Array<{ publicUrl?: string }> | 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 ? (
        <div className='relative w-full h-full'>
          <Image
            src={imageSrc}
            alt={name}
            fill
            sizes='100vw'
            className={`rounded-full object-cover bg-gray-100 dark:bg-dark-900 ${imageClassName}`}
            unoptimized
          />
        </div>
      ) : (
        <div className={'flex h-full bg-slate-100 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>
  );
}