components/Avatar.tsx

import Image from 'next/image';
import React from 'react';

export interface AvatarProps {
  name?: string | null;
  avatar?: string | null;
}

function getUserInitials(name: string) {
  const [firstName, lastName] = name.split(' ');
  return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2);
}

const Avatar: React.FC<AvatarProps> = ({ name, avatar }) => {
  return (
    <>
      {avatar ? (
        <Image
          className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
          src={avatar ?? ''}
          alt={name ?? 'Avatar'}
          height={48}
          width={48}
        />
      ) : (
        <div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none size-7 shrink-0 bg-muted/50 text-muted-foreground">
          {name ? getUserInitials(name) : 'VA'}
        </div>
      )}
    </>
  );
};

export default Avatar;