Epicure/apps/web/components/social/messages-nav-link.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { MessageCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

export function MessagesNavLink() {
  const [unreadTotal, setUnreadTotal] = useState(0);

  useEffect(() => {
    let cancelled = false;
    async function load() {
      try {
        const res = await fetch("/api/v1/conversations");
        if (!res.ok || cancelled) return;
        const data = (await res.json()) as { conversations: { unreadCount: number }[] };
        setUnreadTotal(data.conversations.reduce((sum, c) => sum + c.unreadCount, 0));
      } catch {
        // silent
      }
    }
    void load();
    const interval = setInterval(load, 30_000);
    return () => { cancelled = true; clearInterval(interval); };
  }, []);

  return (
    <Button variant="ghost" size="icon" className="relative" nativeButton={false} aria-label="Messages" render={<Link href="/messages" />}>
      <MessageCircle className="h-4 w-4" />
      {unreadTotal > 0 && (
        <Badge
          variant="destructive"
          className="absolute -top-1 -right-1 h-4 min-w-4 px-1 text-[10px] leading-none flex items-center justify-center"
        >
          {unreadTotal > 9 ? "9+" : unreadTotal}
        </Badge>
      )}
      <span className="sr-only">Messages</span>
    </Button>
  );
}