import React from 'react';

export default function NotificationPanel({ notifications, onClose, onRead, onReadAll, onDelete }) {
  return (
    <div className="bg-white border-b border-gray-200 shadow-lg z-50">
      <div className="max-h-80 overflow-auto">
        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 sticky top-0 bg-white">
          <h3 className="font-semibold text-gray-900">Notifications</h3>
          <div className="flex gap-2">
            <button onClick={onReadAll} className="text-xs text-brand-600 hover:underline">Mark all read</button>
            <button onClick={onClose} className="text-gray-400 hover:text-gray-600">✕</button>
          </div>
        </div>
        {notifications.length === 0 ? (
          <div className="px-4 py-8 text-center text-gray-400 text-sm">No notifications</div>
        ) : (
          notifications.map(n => (
            <div
              key={n.id}
              className={`flex items-start gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-50 ${!n.is_read ? 'bg-brand-50/50' : ''}`}
              onClick={() => onRead(n.id)}
            >
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-gray-900 truncate">{n.title}</p>
                <p className="text-xs text-gray-500 mt-0.5">{n.message}</p>
                <p className="text-xs text-gray-400 mt-1">{new Date(n.created_at).toLocaleString()}</p>
              </div>
              <button onClick={(e) => { e.stopPropagation(); onDelete(n.id); }} className="text-gray-300 hover:text-red-400 text-xs">✕</button>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
