import * as styles from '#/components/ImageEmbed/MediaBadges.css';
import { Text } from '#/components/Text';
import { m } from '#/paraglide/messages';
// app.bsky icon `ArrowsDiagonalOut_Stroke2_Corner0_Rounded`, inlined as DOM SVG.
const FULLSCREEN_PATH =
'M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM4 13a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z';
export type MediaBadgesProps = {
variant: 'gallery' | 'single';
hasAlt: boolean;
cropped: boolean;
large: boolean;
};
export function MediaBadges({ variant, hasAlt, cropped, large }: MediaBadgesProps) {
if (!hasAlt && !cropped) {
return null;
}
const boxClass =
variant === 'single'
? large
? styles.box.singleLarge
: styles.box.singleRegular
: large
? styles.box.galleryLarge
: styles.box.galleryRegular;
const iconSize = large ? 18 : 12;
return (
<div aria-hidden className={large ? styles.cluster.large : styles.cluster.regular}>
{cropped && (
<div className={boxClass}>
<svg
className={styles.icon}
width={iconSize}
height={iconSize}
viewBox="0 0 24 24"
fill="currentColor"
>
<path d={FULLSCREEN_PATH} />
</svg>
</div>
)}
{hasAlt && (
<div className={boxClass}>
<Text weight="bold" size={large ? 'xs' : 'sm'} className={large ? undefined : styles.altSmall}>
{m['common.altText.badge']()}
</Text>
</div>
)}
</div>
);
}