import type { DisplayRestrictions } from '@atcute/bluesky-moderation';
import { clsx } from 'clsx';
import * as styles from '#/components/UserBanner.css';
/** The profile banner image, or a typed solid fallback when the profile has none. */
export function UserBanner({
banner,
moderation,
type = 'default',
}: {
banner?: string | null;
moderation?: DisplayRestrictions;
type?: 'default' | 'labeler';
}) {
if (banner) {
return (
<div className={styles.banner}>
<img
alt=""
className={clsx(styles.image, (moderation?.blurs.length ?? 0) > 0 && styles.blurred)}
src={banner}
/>
</div>
);
}
return <div className={clsx(styles.banner, type === 'labeler' && styles.labelerFallback)} />;
}