import classNames from "classnames";
import React from "react";

import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";

type IProps = {
	text: string;
	read: boolean;
	button: IButtonProps;
	className?: string;
};

export default function NotificationBox(props: IProps) {
	const { className, text, button, read } = props;

	return (
		<div className={classNames(classes["root"], className, !read && classes["unread"])}>
			<div className={classes["content"]}>
				<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_PRIMARY}>
					{text}
				</Typography>
				<Button
					{...button}
					size={button.size ?? EButtonSize.SM}
					variant={button.variant ?? EButtonVariant.SECONDARY}
					styletype={button.styletype ?? EButtonstyletype.TEXT}>
					{button.children}
				</Button>
			</div>

			{!read && (
				<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
					<circle cx="6" cy="6" r="6" fill="#FF4617" />
				</svg>
			)}
		</div>  
	);
}