Toast Message

'use client';

import type { HTMLAttributes, ReactNode } from 'react';
import './ToastNotif.css';

/**
 * ToastNotif — A transient snackbar notification that appears at the corner of the screen.
 *
 * @param message - Required.
 * @param icon - Optional. Default '✅'.
 * @param variant - Optional. 'success' | 'info' | 'error'. Default 'success'.
 * @param show - Optional. Visibility (animated). Default true.
 */
export interface ToastNotifProps extends HTMLAttributes<HTMLDivElement> {
  message: ReactNode;
  icon?: ReactNode;
  variant?: 'success' | 'info' | 'error';
  show?: boolean;
}

export function ToastNotif({ message, icon = '✅', variant = 'success', show = true, className, ...rest }: ToastNotifProps) {
  return (
    <div role="status" {...rest} className={['toast', `toast--${variant}`, show && 'toast--show', className].filter(Boolean).join(' ')}>
      <div className="toast__icon" aria-hidden="true">{icon}</div>
      <span className="toast__msg">{message}</span>
    </div>
  );
}

export default ToastNotif;

/* ToastNotif — ported from astro-component-kit (feedback/ToastNotif.astro) */

.toast { 
  position: fixed; 
  bottom: 2rem; 
  right: 2rem; 
  background: var(--c-bg-elev, #0f172a); 
  color: var(--c-text-1, #fff); 
  padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem); 
  border-radius: var(--r-md, 14px); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  display: flex; 
  align-items: center; 
  gap: var(--sp-3, 0.8rem); 
  box-shadow: 0 15px 45px rgba(0,0,0,0.4); 
  transform: translateY(150%) scale(0.9); 
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  z-index: 10000; 
}

.toast--show { transform: translateY(0) scale(1); }

.toast--success { border-left: 4px solid #10b981; }
.toast--info { border-left: 4px solid var(--c-primary, #6366f1); }
.toast--error { border-left: 4px solid #ef4444; }

.toast__icon { 
  background: rgba(255,255,255,0.05); 
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-sm, 6px); 
  font-size: 1rem;
  flex-shrink: 0;
}

.toast__msg { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }