"use client";

import { Bell } from "lucide-react";
import Link from "next/link";
import { type ReactElement } from "react";
import { useTranslation } from "react-i18next";

import { usePendingWalletReconcile } from "@/hooks/use-pending-wallet-reconcile";
import { playerHeaderControl } from "@/lib/player-spacing";
import { cn } from "@/lib/utils";

type PlayerNotificationBellProps = {
  className?: string;
};

/** 顶栏铃铛：待对账划转提醒 */
export function PlayerNotificationBell({ className }: PlayerNotificationBellProps): ReactElement {
  const { t } = useTranslation("common");
  const { hasUnread } = usePendingWalletReconcile();

  return (
    <Link
      href="/notifications"
      className={cn(
        playerHeaderControl,
        "relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
        className,
      )}
      aria-label={t("navigation.notifications")}
    >
      <Bell className="size-4" aria-hidden />
      {hasUnread ? (
        <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
      ) : null}
    </Link>
  );
}
