import Link from "next/link";
import {Bell} from "lucide-react";

type NotificationBellProps = {
  unreadCount?: number;
  href?: string;
};

export function NotificationBell({unreadCount = 0, href = "#"}: NotificationBellProps) {
  return (
    <Link
      href={href}
      className="relative inline-flex h-10 w-10 items-center justify-center rounded-full border bg-white text-slate-700 hover:bg-slate-50 transition"
      aria-label={`Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`}
    >
      <Bell className="h-5 w-5" />
      {unreadCount > 0 ? (
        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] font-bold text-white">
          {unreadCount > 99 ? "99+" : unreadCount}
        </span>
      ) : null}
    </Link>
  );
}