import * as React from 'react';
import crypto from 'crypto';
import { Avatar } from 'rsuite';
import { UserAuthInfo } from '@/lib/utils/types';


interface DynamicAvatarProps {
  user: UserAuthInfo;
  expanded: boolean;
}

const DynamicAvatar: React.FC<DynamicAvatarProps> = (props) => {
  const { user, expanded } = props;

  function randomColor(v: string) {
    // hash md5 then hex
    const color = crypto.createHash('sha256').update(v).digest('hex').substring(0, 6);
    return `#${color}`;
  }

  // If src is null
  if (user.photoURL !== null) {
    return (
      <Avatar
        size={expanded ? "lg" : "md"}
        circle
        src={user.photoURL}
        alt={`@${user.displayName}`}
      />
    )
  }

  return (
    <Avatar
      circle
      size={props.expanded ? "lg" : "md"}
      alt={`@${user.email}`}
      style={{
        background: randomColor(user.email)
      }}
    >
      {user.email.slice(0, 1).toUpperCase()}
    </Avatar>
  )
}

export default DynamicAvatar;