import {
  BaseEventProps,
  BaseEventContainer,
  ClickableEventTitle,
} from "./BaseEventRenderer";
import { Label } from "@/components/ui/label";
import {
  getMonitorFrequency,
  getMonitorChecks,
  formatFrequency,
  getCheckTypeName,
} from "@/lib/nip66-helpers";
import { Clock } from "lucide-react";

/**
 * Monitor Announcement Renderer - NIP-66 Relay Monitor Announcement (Feed View)
 * Kind 10166 - Displays monitor announcement with frequency and check types
 */
export function MonitorAnnouncementRenderer({ event }: BaseEventProps) {
  const frequency = getMonitorFrequency(event);
  const checks = getMonitorChecks(event);

  return (
    <BaseEventContainer event={event}>
      <div className="flex flex-col gap-2">
        {/* Clickable Title */}
        <ClickableEventTitle event={event} className="text-base font-semibold">
          Relay Monitor
        </ClickableEventTitle>

        {/* Monitoring Frequency */}
        {frequency && !isNaN(frequency) && (
          <div className="flex items-center gap-2 text-sm">
            <Clock className="size-4 text-muted-foreground" />
            <span>
              Checks every{" "}
              <span className="font-medium">{formatFrequency(frequency)}</span>
            </span>
          </div>
        )}

        {/* Check Types */}
        {checks.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            {checks.map((check) => (
              <Label key={check} className="text-xs text-muted-foreground">
                {getCheckTypeName(check)}
              </Label>
            ))}
          </div>
        )}

        {!frequency && checks.length === 0 && (
          <div className="text-xs text-muted-foreground italic">
            No monitoring configuration specified
          </div>
        )}
      </div>
    </BaseEventContainer>
  );
}
