'use client';
import { useState } from 'react';
import { NotificationPanel } from './NotificationPanel';
export function BellNotification({ notifications, isLoading, total, hasNew, onOpen, onClose, onLoadMore, }) {
    const [isOpen, setIsOpen] = useState(false);
    const handleOpen = () => {
        setIsOpen(true);
        onOpen?.();
    };
    const handleClose = () => {
        setIsOpen(false);
        onClose?.();
    };
    return (<div className="relative justify-center">
      <button onClick={handleOpen} className="relative cursor-pointer p-1" aria-label="Notificaciones">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>

        <span className={`bg-error absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold text-white transition-opacity duration-300 ${hasNew ? 'opacity-100' : 'opacity-0'}`}>
          !
        </span>
      </button>

      <NotificationPanel isOpen={isOpen} onClose={handleClose} notifications={notifications} isLoading={isLoading} total={total} onLoadMore={onLoadMore}/>
    </div>);
}
//# sourceMappingURL=BellNotification.jsx.map