import { Skeleton } from '../../../../components/ui/skeleton';
import { InboxAvatar } from '../../MessagesPage/InboxRow';
import type { RowName } from '../../../../utils/messaging/counterpartyRowName';

// The row's name: a placeholder while the record loads, a muted sentence when it cannot be named.
// The placeholder is a span because the name sits inside a paragraph, where the div Skeleton cannot go.
export const CounterpartyName = ({ name }: { name: RowName }) => {
    if (name.kind === 'pending') {
        return (
            <span data-testid="row-name-pending">
                <span aria-hidden="true" className="inline-block h-4 w-32 animate-pulse rounded-md bg-accent align-middle" />
                <span className="sr-only">Loading name…</span>
            </span>
        );
    }
    if (name.kind === 'unavailable') return <span className="text-ink-muted">{name.text}</span>;
    return <>{name.text}</>;
};

// Initials only from a real name; a placeholder or a sentence has none. The shared wrap keeps the avatar
// its size beside a long preview, which otherwise squeezed a photo to a sliver.
export const CounterpartyAvatar = ({ name, imageUrl }: { name: RowName; imageUrl?: string }) => (
    <span className="ahr-inbox-avatar-wrap">
        <InboxAvatar
            label={name.kind === 'name' ? name.text : ''}
            imageUrl={imageUrl}
            glyph={name.kind === 'pending' ? <Skeleton className="size-full rounded-full" /> : undefined}
        />
    </span>
);