/**
 * Canvas Toast
 *
 * Non-interactive overlay that shows brief feedback messages
 * (e.g., "Undo: Split node"). Positioned at bottom-center.
 * Fades in/out with CSS transitions.
 */

'use client';

import React from 'react';
import { useAtomValue } from 'jotai';
import { canvasToastAtom } from '../core/toast-store';

export interface CanvasToastProps {
	/** Custom class name */
	className?: string;
	/** Custom styles */
	style?: React.CSSProperties;
}

export function CanvasToast({ className, style }: CanvasToastProps) {
	const toast = useAtomValue(canvasToastAtom);

	return (
		<div
			className={className}
			style={{
				position: 'absolute',
				bottom: '24px',
				left: '50%',
				transform: 'translateX(-50%)',
				zIndex: 200,
				pointerEvents: 'none',
				...style,
			}}
		>
			<div
				style={{
					fontSize: '13px',
					fontWeight: 500,
					color: 'var(--canvas-control-fg, rgba(255,255,255,0.95))',
					backgroundColor: 'var(--canvas-control-bg, rgba(30,30,30,0.92))',
					backdropFilter: 'blur(12px)',
					WebkitBackdropFilter: 'blur(12px)',
					border: '1px solid var(--canvas-control-border, rgba(255,255,255,0.1))',
					padding: '6px 16px',
					borderRadius: '8px',
					whiteSpace: 'nowrap',
					opacity: toast ? 1 : 0,
					transform: toast ? 'translateY(0)' : 'translateY(8px)',
					transition: 'opacity 200ms ease, transform 200ms ease',
				}}
			>
				{toast?.message ?? ''}
			</div>
		</div>
	);
}
