import classes from "./classes.module.scss";
import classNames from "classnames";
import { InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";

export type IProps = {
	type: "info" | "warning" | "success" | "error";
	children?: React.ReactNode;
	className?: string;
};

export default function MessageBox(props: IProps) {
	const { className, type, children } = props;
	return (
		<div className={classNames(className, classes["root"], classes[type])}>
			{getIcon(type)}
			<div className={classes["content"]}>
				<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
					{children}
				</Typography>
			</div>
		</div>
	);

	function getIcon(type: IProps["type"]) {
		switch (type) {
			case "info":
				return <InformationCircleIcon />;
			case "warning":
				return <ExclamationTriangleIcon />;
			case "success":
				return <InformationCircleIcon />;
			case "error":
				return <InformationCircleIcon />;
		}
	}
}