hooks/useToasts.ts

import { useState, useCallback } from 'react';

export type ToastMessage = {
  id: string;
  message: string;
  type: 'success' | 'error' | 'info';
};

export const useToasts = () => {
  const [toasts, setToasts] = useState<ToastMessage[]>([]);

  const showToast = useCallback((message: string, type: ToastMessage['type']) => {
    const newToast: ToastMessage = { id: Date.now().toString(), message, type };
    // Add new toast and limit to max 5 toasts shown
    setToasts(prevToasts => [newToast, ...prevToasts.slice(0, 4)]); 
    setTimeout(() => {
      setToasts(prevToasts => prevToasts.filter(t => t.id !== newToast.id));
    }, 5000); // Autohide after 5 seconds
  }, []);

  return { toasts, showToast };
};