Toast.tsx

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

import { Theme } from '@root/theme'
import { removeToast } from '@root/utils/toasts'

import CloseIcon from '../../assets/icons/close.svg'

const Wrapper = styled.div<{ theme: Theme }>`
	position: fixed;
	display: grid;
	gap: ${({ theme }) => theme.spacing(1)};
	grid-template-rows: min-content auto;
	width: min(30vw, 300px);
	bottom: 2rem;
	right: 2rem;
	border-radius: ${({ theme }) => theme.spacing(1)};
	padding: 1rem;
	border: solid 2px currentColor;
	transition: transform ${({ theme }) => theme.duration.leavingScreen}ms;
	overflow: hidden;
	background-color: ${({ theme }) => theme.bg.light};

	&::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: ${({ theme }) => theme.spacing(0.5)};
	}

	&.error::before {
		background-color: ${({ theme }) => theme.palette.error.main};
	}

	&.info::before {
		background-color: ${({ theme }) => theme.palette.success.main};
	}

	&.warning {
		background-color: ${({ theme }) => theme.palette.purple.main};;
	}

	&.animation-out {
		transform: translateX(500px);
	}
`

const CloseButton = styled.button`
	place-self: end;
	padding: 0;
	background-color: transparent;
	appearance: none;
	border: none;

	svg {
		fill: currentColor;
	}
`

export type ToastVariant = 'error' | 'warning' | 'info'

type Props = {
	closable?: boolean
	variant?: ToastVariant
}

const Toast: React.FC<Props> = ({ variant = 'error', children, closable = true }) => {
	return (
		<Wrapper className={['fa__toast-wrapper', variant].join(' ')} >
			{closable && <CloseButton className="fa__toast-wrapper--close-button" onClick={() => removeToast()}><CloseIcon /></CloseButton>}
			<div className="fa__toast-wrapper--content">
				{children}
			</div>
		</Wrapper>
	)
}

export default Toast