"use client";

import { CircleOff } from "lucide-react";
import type { SourceImpactResponse } from "@/lib/api/types";
import { ImpactRipple } from "./impact-ripple";

interface ImpactPreviewProps {
  impact: SourceImpactResponse;
  isAnimating?: boolean;
}

export function ImpactPreview({
  impact,
  isAnimating = false,
}: ImpactPreviewProps) {
  const hasImpact =
    impact.assertion_count > 0 || impact.affected_agents.length > 0;

  if (!hasImpact) {
    return (
      <div className="rounded-lg border border-border bg-muted/30 p-6">
        <div className="flex flex-col items-center gap-2 text-muted-foreground">
          <CircleOff className="h-8 w-8" />
          <p className="text-sm font-medium">No downstream impact</p>
          <p className="text-xs text-center">
            No assertions cite this source. Blocking it won&apos;t affect any
            queries or agents.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-4">
      <div className="flex items-center justify-center gap-8">
        <ImpactRipple
          count={impact.assertion_count}
          label="Assertions"
          isAnimating={isAnimating}
        />
        <ImpactRipple
          count={impact.affected_agents.length}
          label="Agents"
          isAnimating={isAnimating}
        />
      </div>
      <p className="mt-4 text-center text-sm text-muted-foreground">
        {impact.summary}
      </p>
    </div>
  );
}
