arbret/frontend/app/components/Toast.tsx

"use client";

import { useEffect } from "react";
import { toastStyles } from "../styles/shared";

export type ToastType = "success" | "error";

export interface ToastProps {
  message: string;
  type: ToastType;
  onDismiss?: () => void;
  /** Auto-dismiss delay in milliseconds (default: 3000) */
  autoDismissDelay?: number;
}

/**
 * Toast notification component with auto-dismiss functionality.
 * Displays success or error messages in a fixed position.
 */
export function Toast({ message, type, onDismiss, autoDismissDelay = 3000 }: ToastProps) {
  useEffect(() => {
    if (onDismiss) {
      const timer = setTimeout(() => {
        onDismiss();
      }, autoDismissDelay);
      return () => clearTimeout(timer);
    }
  }, [onDismiss, autoDismissDelay]);

  return (
    <div
      style={{
        ...toastStyles.toast,
        ...(type === "success" ? toastStyles.toastSuccess : toastStyles.toastError),
      }}
    >
      {message}
    </div>
  );
}