import { createPortal } from "react-dom";

import { Icon } from "@ax/components";

import * as S from "./style";

const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
	const { message, icon = "alert", onDismiss } = props;

	return createPortal(
		<S.Wrapper data-testid="occasional-toast-wrapper">
			<S.IconWrapper>
				<Icon name={icon} />
			</S.IconWrapper>
			<S.Text data-testid="occasional-toast-message">{message}</S.Text>
			{onDismiss && (
				<S.DismissButton type="button" onClick={onDismiss}>
					<Icon name="close" size="16px" />
				</S.DismissButton>
			)}
		</S.Wrapper>,
		document.body,
	);
};

export interface IOcassionalToastProps {
	message: string | React.ReactNode;
	icon?: string;
	onDismiss?: () => void;
}

export default OcassionalToast;
