// src/NotificationContext.tsx

import React, { createContext, useContext, useState } from 'react';

export type NotificationType = 'success' | 'error';

interface NotificationContextType {
  notify: (message: string, type: NotificationType) => void;
}

const NotificationContext = createContext<NotificationContextType | undefined>(undefined);

export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [notification, setNotification] = useState<string | null>(null);
  const [notificationType, setNotificationType] = useState<NotificationType | null>(null);

  const notify = (message: string, type: NotificationType) => {
    setNotification(message);
    setNotificationType(type);

    // Automatically dismiss notification after 3 seconds
    setTimeout(() => {
      setNotification(null);
      setNotificationType(null);
    }, 3000);
  };

  return (
    <NotificationContext.Provider value={{ notify }}>
      {children}
      {notification && (
        <Notification message={notification} onClose={() => setNotification(null)} type={notificationType!} />
      )}
    </NotificationContext.Provider>
  );
};

export const useNotification = () => {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error('useNotification must be used within a NotificationProvider');
  }
  return context.notify;
};


interface NotificationProps {
  message: string;
  onClose: () => void;
  type: 'success' | 'error'; // Define notification types
}

// Notification Component
const Notification: React.FC<NotificationProps> = ({ message, onClose, type }) => {
  return (
    <div style={{ ...styles.notification, backgroundColor: type === 'success' ? '#4caf50' : '#f44336' }}>
      <p>{message}</p>
      <button onClick={onClose} style={styles.closeButton}>X</button>
    </div>
  );
};

// Notification styles remain the same...
const styles: { [key: string]: React.CSSProperties } = {
  notification: {
    position: 'fixed',
    top: '20px',
    right: '20px',
    color: 'white',
    padding: '15px',
    borderRadius: '5px',
    zIndex: 1000,
  },
  closeButton: {
    background: 'transparent',
    border: 'none',
    color: 'white',
    cursor: 'pointer',
    marginLeft: '10px',
  },
};