import type { AnyProfileView } from '@atcute/bluesky';
import { clsx } from 'clsx';
import { useProfileShadow } from '#/state/cache/profile-shadow';
import { useFontScaleMultiplier } from '#/state/preferences/appearance';
import { BotBadge, BotBadgeButton, isBotAccount } from '#/components/BotBadge';
import * as css from '#/components/ProfileBadges.css';
import { useSimpleVerificationState } from '#/components/verification';
import { VerificationCheck } from '#/components/verification/VerificationCheck';
import { VerificationCheckButton } from '#/components/verification/VerificationCheckButton';
export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
const verificationIconSizes: Record<Size, number> = {
lg: 18,
md: 14,
sm: 12,
xl: 22,
xs: 10,
} as const;
const botIconSizes: Record<Size, number> = {
lg: 19,
md: 15,
sm: 13,
xl: 23,
xs: 11,
} as const;
export function ProfileBadges({
className,
interactive = false,
profile,
size,
}: {
className?: string;
interactive?: boolean;
profile: AnyProfileView;
size: Size;
}) {
const shadowed = useProfileShadow(profile);
const verification = useSimpleVerificationState({ profile });
const scaleMultiplier = useFontScaleMultiplier();
// if nothing to show, don't render the container at all
if (!verification.showBadge && !isBotAccount(shadowed)) {
return null;
}
const isOnTheSmallSide = size === 'sm' || size === 'xs';
const verificationIconWidth = verificationIconSizes[size] * scaleMultiplier;
const botIconWidth = botIconSizes[size] * scaleMultiplier;
return (
<span className={clsx(css.container({ small: isOnTheSmallSide }), className)}>
{interactive ? (
<>
<VerificationCheckButton profile={shadowed} width={verificationIconWidth} />
<BotBadgeButton profile={shadowed} width={botIconWidth} />
</>
) : (
<>
{verification.showBadge && (
<VerificationCheck
className={css.verificationCheck}
width={verificationIconWidth}
height={verificationIconWidth}
verifier={verification.role === 'verifier'}
/>
)}
<BotBadge profile={shadowed} width={botIconWidth} />
</>
)}
</span>
);
}