'use client';

import Link from 'next/link';
import { Bell } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useAuth } from '@/contexts/AuthContext';
import { useNotifications } from '@/contexts/NotificationContext';
import { cn } from '@/lib/utils';

export function NotificationBell({
  buttonClassName,
}: {
  buttonClassName?: string;
} = {}) {
  const { user } = useAuth();
  const { unreadCount } = useNotifications();

  if (!user) return null;

  const href =
    user.role === 'WORKER'
      ? '/worker/notifications'
      : user.role === 'ADMIN'
        ? '/admin'
        : '/customer/notifications';

  return (
    <Link href={href} className="relative">
      <Button variant="ghost" size="icon" className={cn('h-10 w-10', buttonClassName)}>
        <Bell className="h-5 w-5" />
      </Button>
      {unreadCount > 0 && (
        <span
          className={cn(
            'absolute -top-0.5 -right-0.5 flex items-center justify-center',
            'min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white',
            'text-[10px] font-bold leading-none'
          )}
        >
          {unreadCount > 99 ? '99+' : unreadCount}
        </span>
      )}
    </Link>
  );
}