/** @format */

import React from 'react';
import styled from 'styled-components';

const Block = styled.div`
	width: 300px;
	height: 60px;
	background-color: #c9d5d9;
	border-radius: 10px;
	padding: 10px;
	position: fixed;
	transition: 1s;
	top: 20px;
	right: -340px;
	animation: ${({ secondLine }) => (secondLine ? 'anim 5s' : '')};
	@keyframes anim {
		0% {
			right: -340px;
		}
		5% {
			right: 20px;
		}
		95% {
			right: 20px;
		}
		100% {
			right: -340px;
		}
	}
`;

const SecondNotifSip = ({ secondLine }) => {
	return <Block secondLine={secondLine}></Block>;
};

export default SecondNotifSip;
