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

import * as S from "./style";

const FloatingNote = (props: IFloatingNoteProps): JSX.Element => {
	const { message, icon, className, btnText, onClick } = props;

	return (
		<S.Wrapper data-testid="floating-note-wrapper" className={className}>
			{icon && (
				<S.IconWrapper>
					<Icon name={icon} size="16" />
				</S.IconWrapper>
			)}
			<S.Text data-testid="floating-note-message">{message}</S.Text>
			{btnText && (
				<S.ActionWrapper>
					<Button type="button" buttonStyle="minimal" onClick={onClick}>
						{btnText}
					</Button>
				</S.ActionWrapper>
			)}
		</S.Wrapper>
	);
};

export interface IFloatingNoteProps {
	message: React.ReactNode;
	icon?: string;
	className?: string;
	btnText?: string;
	onClick?: () => void;
}

export default FloatingNote;
