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

type Props = {
  username: string;
  avatar?: string | null;
  image?: Array<{ publicUrl?: string }> | null;
  api?: string;
  className?: string;
  children?: ReactNode;
};

export default function UserAvatar({
  username,
  image,
  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'
          }
        />
      ) : (
        <div className='relative w-full h-full'>
          <Image
            src={avatarImage}
            alt={username}
            fill
            sizes='100vw'
            className='rounded-full object-cover bg-gray-100 dark:bg-slate-800'
            unoptimized
          />
        </div>
      )}
      {children}
    </div>
  );
}
