// Toast notification component - Sharp Square Cyber Theme
window.ToastContainer = function ToastContainer({ toast, onClose }) {
  if (!toast) return null;

  const isSuccess = toast.type === 'success';
  const isError = toast.type === 'error';
  const isWarning = toast.type === 'warning';

  const bgColor = isSuccess
    ? 'border-emerald-500/60 bg-emerald-950/90 text-emerald-200'
    : isError
    ? 'border-rose-500/60 bg-rose-950/90 text-rose-200'
    : isWarning
    ? 'border-amber-500/60 bg-amber-950/90 text-amber-200'
    : 'border-blue-500/60 bg-blue-950/90 text-blue-200';

  const icon = isSuccess
    ? 'fa-circle-check text-emerald-400'
    : isError
    ? 'fa-circle-xmark text-rose-400'
    : isWarning
    ? 'fa-triangle-exclamation text-amber-400'
    : 'fa-circle-info text-blue-400';

  return (
    <div className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50 animate-fade-in max-w-[calc(100vw-2rem)] sm:max-w-md">
      <div className={`flex items-center gap-3 px-4 py-3 sm:px-5 sm:py-3.5 rounded-none border shadow-2xl backdrop-blur-md ${bgColor}`}>
        <i className={`fa-solid ${icon} text-base shrink-0`}></i>
        <div className="text-xs sm:text-sm font-medium pr-2 break-anywhere">{toast.msg}</div>
        <button
          onClick={onClose}
          className="ml-auto text-slate-400 hover:text-white p-1 rounded-none transition shrink-0"
        >
          <i className="fa-solid fa-xmark text-xs"></i>
        </button>
      </div>
    </div>
  );
};