"use client";

import { useEffect, useState, type ReactNode } from "react";
import Link from "next/link";

const STORAGE_KEY = "changelogLastSeen";

export function ChangelogNavLink({
  href,
  label,
  latestDate,
  className,
  icon,
}: {
  href: string;
  label: string;
  latestDate: string | null;
  className?: string;
  // A pre-rendered icon ELEMENT (not the component) — a server layout can't pass
  // a function/component across the client boundary, but a ReactNode is fine.
  icon?: ReactNode;
}) {
  const [unread, setUnread] = useState(false);

  useEffect(() => {
    if (!latestDate) return;
    try {
      const lastSeen = window.localStorage.getItem(STORAGE_KEY);
      setUnread(!lastSeen || lastSeen < latestDate);
    } catch {
      // localStorage unavailable — leave unread false
    }
  }, [latestDate]);

  return (
    <Link href={href} className={className}>
      {icon}
      <span>{label}</span>
      {unread && (
        <span
          aria-label="New changelog entry"
          title="New changelog entry"
          className="ml-auto inline-block w-2 h-2 rounded-full bg-brand"
        />
      )}
    </Link>
  );
}