import type { ReactNode } from 'react';

import { Text } from '#/components/Text';
import { Button, ButtonIcon } from '#/components/web/Button';

import CircleInfoIcon from '#/icons/central/CircleInfo_round_outlined_radius1_stroke2.svg';
import XIcon from '#/icons/central/CrossLarge_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

import * as styles from './ComposerError.css';

/**
 * wraps a stack of {@link Box} error callouts, owning their shared outer padding and spacing. renders nothing
 * when it has no boxes.
 */
export function Root({ children }: { children: ReactNode }) {
	return <div className={styles.list}>{children}</div>;
}

/**
 * A single composer error callout: a filled contrast-25 box with a negative info icon; dismissible when
 * `onDismiss` is set.
 */
export function Box({
	error,
	detail,
	onDismiss,
}: {
	error: string;
	detail?: string;
	onDismiss?: () => void;
}) {
	return (
		<div className={styles.box}>
			<div className={styles.icon}>
				<CircleInfoIcon className={styles.circleInfoIcon} />
			</div>
			<div className={styles.column}>
				<Text>{error}</Text>

				{detail && (
					<Text color="textContrastMedium" size="sm">
						{detail}
					</Text>
				)}
			</div>
			{onDismiss && (
				<Button
					className={styles.dismiss}
					color="secondary"
					label={m['view.composer.a11y.dismissError']()}
					onClick={onDismiss}
					shape="round"
					size="tiny"
					variant="ghost"
				>
					<ButtonIcon icon={XIcon} />
				</Button>
			)}
		</div>
	);
}