import { Avatar } from '#/components/atoms/avatar.jsx';
import { profileFor } from '#/lib/authors.js';
import { identicon } from '#/lib/avatars.js';
import { cn } from '#/lib/utils.js';

/**
 * An identity beside its statements: the avatar, then the handle. The
 * avatar is the profile picture where one is known and a pattern drawn
 * from the DID where none is. Children render right after the handle, for
 * a suffix that belongs to it, such as a branch name.
 *
 * The container aligns on the text's baseline, so a row of statements can
 * too; the avatar centers itself against that line.
 */
export function Handle({ who, className, children }) {
  return (
    <span
      className={cn(
        'inline-flex min-w-0 items-baseline gap-1.5 font-mono text-muted-foreground',
        className,
      )}
    >
      <Avatar
        src={profileFor(who?.did)?.avatar || identicon(who?.did || who?.handle)}
        className="size-4 self-center"
      />
      <span className="truncate">
        {who?.handle}
        {children}
      </span>
    </span>
  );
}