"use client";

import { Bell } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";

type HeaderNotificationsProps = {
  /** Optional unread count badge. Omit or 0 to hide the badge. */
  unreadCount?: number;
};

export function HeaderNotifications({ unreadCount = 0 }: HeaderNotificationsProps) {
  const showBadge = unreadCount > 0;

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          size="icon"
          variant="outline"
          aria-label={showBadge ? `Notifications, ${unreadCount} unread` : "Notifications"}
          className="relative"
        >
          <Bell className="size-4" />
          {showBadge ? (
            <span className="absolute top-1.5 right-1.5 flex size-2">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-destructive opacity-75" />
              <span className="relative inline-flex size-2 rounded-full bg-destructive" />
            </span>
          ) : null}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-80 p-0">
        <div className="flex items-center justify-between px-3 py-2.5">
          <p className="font-medium text-sm">Notifications</p>
          {showBadge ? (
            <span className="rounded-full bg-muted px-2 py-0.5 text-muted-foreground text-xs">
              {unreadCount > 99 ? "99+" : unreadCount} new
            </span>
          ) : null}
        </div>
        <Separator />
        <div className="flex flex-col items-center justify-center gap-1 px-4 py-10 text-center">
          <Bell className="mb-1 size-8 text-muted-foreground/50" />
          <p className="font-medium text-sm">No notifications</p>
          <p className="text-muted-foreground text-xs">You’re all caught up for now.</p>
        </div>
      </PopoverContent>
    </Popover>
  );
}