import React from 'react';
import useAppStore from '../store/useAppStore';

const NotificationCenter: React.FC = () => {
  const notifications = useAppStore((s) => s.notifications);
  const removeNotification = useAppStore((s) => s.removeNotification);

  if (!notifications || notifications.length === 0) return null;

  return (
    <div className="notif-container">
      {notifications.map((n) => (
        <div key={n.id} className={`notif ${n.type ?? ''}`}>
          <div>{n.message}</div>
          <button onClick={() => removeNotification(n.id)}>×</button>
        </div>
      ))}
    </div>
  );
};

export default NotificationCenter;