import type { PostNumbering } from '#/state/queries/feed-tuner';

import { Text } from '#/components/Text';

import { m } from '#/paraglide/messages';

import * as css from './PostNumber.css';

function Badge({ className, value }: { className: string; value: PostNumbering }) {
	const { index, count } = value;

	return (
		<Text
			role="img"
			aria-label={m['components.post.number.a11y.position']({ index, count })}
			className={className}
			color="textContrastMedium"
			size="xs"
			weight="medium"
		>
			{m['components.post.number.badge']({ index, count })}
		</Text>
	);
}

/**
 * renders a thread position after post text.
 *
 * @param props badge properties
 * @returns the position badge
 */
export function PostNumber({ value }: { value: PostNumbering }) {
	return <Badge className={css.inline} value={value} />;
}

/**
 * renders a thread position on its own line.
 *
 * @param props badge properties
 * @returns the position badge
 */
export function PostNumberBlock({ value }: { value: PostNumbering }) {
	return <Badge className={css.block} value={value} />;
}