'use no memo'; // generated cache cost outweighs reuse in these shallow renderers

import type { ReactNode } from 'react';

import { clsx } from 'clsx';

import { Text } from '#/components/Text';
import * as styles from '#/components/web/Admonition.css';

import CircleInfoIcon from '#/icons/central/CircleInfo_round_outlined_radius1_stroke2.svg';
import CircleXIcon from '#/icons/central/CircleX_round_outlined_radius1_stroke2.svg';
import EmojiSadIcon from '#/icons/central/EmojiSad_round_outlined_radius1_stroke2.svg';
import WarningIcon from '#/icons/central/ExclamationTriangle_round_outlined_radius1_stroke2.svg';

type AdmonitionType = 'apology' | 'error' | 'info' | 'tip' | 'warning';

const ICONS = {
	apology: EmojiSadIcon,
	error: CircleXIcon,
	info: CircleInfoIcon,
	tip: CircleInfoIcon,
	warning: WarningIcon,
};

export function Admonition({
	children,
	type = 'info',
	className,
}: {
	children: ReactNode;
	type?: AdmonitionType;
	className?: string;
}) {
	const Icon = ICONS[type];
	return (
		<div className={clsx(styles.outer({ type }), className)}>
			<div className={styles.row}>
				<Icon className={styles.iconWrap[type]} />
				<div className={styles.content}>
					<Text>{children}</Text>
				</div>
			</div>
		</div>
	);
}