/**
* NotificationsPanel Component
*
* Dropdown panel showing list of notifications.
* Supports two variants:
* - 'dropdown' (default): Absolute positioned dropdown for desktop
* - 'inline': For use inside SwipeableDrawer on mobile
*/
'use client';
import Link from 'next/link';
import { useNotificationsContext } from '@/contexts/NotificationsContext';
import { NotificationItem } from './NotificationItem';
import { Button } from '@/components/ui/button';
import { Loader2, CheckCheck, Bell, ArrowRight } from 'lucide-react';
interface NotificationsPanelProps {
onClose: () => void;
variant?: 'dropdown' | 'inline';
}
export function NotificationsPanel({ onClose, variant = 'dropdown' }: NotificationsPanelProps) {
const { notifications, loading, unreadCount, markAsRead, deleteNotification } = useNotificationsContext();
const handleMarkAllRead = async () => {
await markAsRead();
};
// Desktop dropdown: absolute positioned with fixed width
// Mobile inline: full width, no positioning (used inside SwipeableDrawer)
// Use explicit dark styling for dropdown to ensure visibility in header
const containerClassName = variant === 'dropdown'
? "absolute right-0 top-12 z-50 w-full max-w-[400px] min-w-[280px] max-h-[600px] overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg"
: "w-full overflow-hidden bg-gray-900";
return (
<div className={containerClassName}>
{/* Header */}
<div className="flex items-center justify-between border-b border-gray-700 p-4">
<h3 className="text-lg font-semibold text-white">Notifications</h3>
{unreadCount > 0 && (
<Button
variant="ghost"
size="sm"
onClick={handleMarkAllRead}
className="text-xs text-gray-300 hover:text-white hover:bg-gray-800"
>
<CheckCheck className="mr-1 h-4 w-4" />
Mark all read
</Button>
)}
</div>
{/* Notifications List */}
<div className="max-h-[400px] overflow-y-auto">
{loading ? (
<div className="flex items-center justify-center p-8">
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
</div>
) : notifications.length === 0 ? (
<div className="flex flex-col items-center justify-center p-8 text-center">
<div className="mb-2 rounded-full bg-gray-800 p-3">
<Bell className="h-6 w-6 text-gray-400" />
</div>
<p className="text-sm text-gray-400">No notifications yet</p>
</div>
) : (
<div className="divide-y divide-gray-700">
{notifications.map((notification) => (
<NotificationItem
key={notification.id}
notification={notification}
onClose={onClose}
onDelete={deleteNotification}
/>
))}
</div>
)}
</div>
{/* Footer - View all link */}
<div className="border-t border-gray-700 p-3">
<Link
href="/notifications"
onClick={onClose}
className="flex items-center justify-center gap-2 w-full py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800 rounded-md transition-colors"
>
View all notifications
<ArrowRight className="h-4 w-4" />
</Link>
</div>
</div>
);
}
