import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
import { cn } from '#/lib/utils.js';

/**
 * A user or app avatar. Shows `src` once it loads and the `fallback` node
 * (an initial, usually) until or unless it does.
 */
export function Avatar({ src, fallback, className }) {
  return (
    <BaseAvatar.Root
      className={cn(
        'flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full border border-input bg-accent align-middle',
        className,
      )}
    >
      {src && (
        <BaseAvatar.Image src={src} alt="" className="size-full object-cover" />
      )}
      <BaseAvatar.Fallback className="flex size-full items-center justify-center">
        {fallback}
      </BaseAvatar.Fallback>
    </BaseAvatar.Root>
  );
}