import * as React from "react";
import * as Toast from "@radix-ui/react-toast";
import "./styles.css";

type ToastProps = {
	isOpen: boolean;
	style?: React.CSSProperties;
	text?: string;
};

const RedToastDemo = (props: ToastProps) => {
	return (
		<Toast.Provider swipeDirection="right">
			<Toast.Root
				className="ToastRoot"
				open={props.isOpen}
				style={{
					border: "#BB3F3F 1px solid",
					backgroundColor: "hsl(359, 69.5%, 74.3%)",
					color: "white"
				}}
			>
				<Toast.Title className="ToastTitle">
					<div
						style={
							props.style || {
								textAlign: "center",
								color: "white",
								fontSize: "1.1em"
							}
						}
					>
						{props.text || "Autosaving..."}
					</div>
				</Toast.Title>
				<Toast.Description asChild>{"Waiting for more changes..."}</Toast.Description>
				<Toast.Action className="ToastAction" asChild altText="Goto schedule to undo"></Toast.Action>
			</Toast.Root>
			<Toast.Viewport className="ToastViewport" />
		</Toast.Provider>
	);
};

export default RedToastDemo;