import * as Prompt from '#/components/Prompt';

import Bubble from '#/icons/central/Bubble2_round_outlined_radius1_stroke2.svg';
import Eye from '#/icons/central/EyeOpen_round_outlined_radius1_stroke2.svg';
import Megaphone from '#/icons/central/Megaphone_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

/**
 * Mute/unmute confirmation. Muting shows an explainer of what the mute does; unmuting shows a plain
 * confirmation. `onConfirm` runs whichever action matches the current state.
 */
export function MuteAccountPrompt({
	handle,
	isMuted,
	onConfirm,
}: {
	handle: Prompt.PromptHandle;
	isMuted: boolean;
	onConfirm: () => void;
}) {
	if (isMuted) {
		return (
			<Prompt.Basic
				handle={handle}
				title={m['components.moderation.mute.unmuteTitle']()}
				description={m['components.moderation.mute.unmuteResume']()}
				onConfirm={onConfirm}
				confirmButtonCta={m['common.mute.action.unmute']()}
			/>
		);
	}

	return (
		<Prompt.Outer handle={handle} size="wide">
			<Prompt.Content>
				<Prompt.TitleText>{m['components.moderation.mute.confirmTitle']()}</Prompt.TitleText>
				<Prompt.DescriptionText>{m['components.moderation.whatHappens']()}</Prompt.DescriptionText>

				<Prompt.Rows>
					<Prompt.Row icon={Megaphone}>{m['components.moderation.mute.unaware']()}</Prompt.Row>
					<Prompt.Row icon={Eye}>{m['components.moderation.mute.seePostsNotReplies']()}</Prompt.Row>
					<Prompt.Row icon={Bubble}>{m['components.moderation.mute.replyNoNotif']()}</Prompt.Row>
				</Prompt.Rows>
			</Prompt.Content>
			<Prompt.Actions>
				<Prompt.Action onPress={onConfirm} cta={m['common.mute.action.mute']()} />
				<Prompt.Cancel />
			</Prompt.Actions>
		</Prompt.Outer>
	);
}