import type { DisplayRestrictions, ModerationCause } from '@atcute/bluesky-moderation';
import { uniqueBy } from '@mary/array-fns';
import { clsx } from 'clsx';
import { getModerationCauseKey } from '#/lib/moderation/causes';
import * as Pills from '#/components/web/Pills';
import * as styles from './PostAlerts.css';
export function PostAlerts({
additionalCauses,
className,
modui,
size = 'sm',
}: {
additionalCauses?: ModerationCause[] | Pills.AppModerationCause[];
className?: string;
modui: DisplayRestrictions;
size?: Pills.CommonProps['size'];
}) {
if (modui.alerts.length === 0 && modui.informs.length === 0 && !additionalCauses?.length) {
return null;
}
return (
<Pills.Row className={clsx(size === 'sm' && styles.smOffset, className)} size={size}>
{uniqueBy(modui.alerts, getModerationCauseKey).map((cause) => (
<Pills.Label cause={cause} key={getModerationCauseKey(cause)} noBg={size === 'sm'} size={size} />
))}
{uniqueBy(modui.informs, getModerationCauseKey).map((cause) => (
<Pills.Label cause={cause} key={getModerationCauseKey(cause)} noBg={size === 'sm'} size={size} />
))}
{additionalCauses?.map((cause) => (
<Pills.Label cause={cause} key={getModerationCauseKey(cause)} noBg={size === 'sm'} size={size} />
))}
</Pills.Row>
);
}