import type { TargetStatus } from "../../shared/api";
import { StatusDot } from "./StatusDot";
import { SparklineChart } from "./SparklineChart";

interface TargetRowProps {
  target: TargetStatus;
  expanded: boolean;
  onToggle: () => void;
}

export function TargetRow({ target, expanded, onToggle }: TargetRowProps) {
  const isUp = target.latestCheck?.success && target.latestCheck?.matched;

  const sparklineData = target.sparkline.map((duration) => ({ duration }));

  return (
    <tr className={`target-row ${expanded ? "expanded" : ""}`} onClick={onToggle}>
      <td className="col-status">
        <StatusDot up={!!isUp} />
      </td>
      <td className="col-name">{target.name}</td>
      <td className="col-target">{target.target}</td>
      <td className="col-type">{target.type === "http" ? "HTTP" : "Command"}</td>
      <td className="col-duration">
        {target.latestCheck?.durationMs !== null && target.latestCheck?.durationMs !== undefined
          ? `${Math.round(target.latestCheck.durationMs)}ms`
          : "-"}
      </td>
      <td className="col-sparkline">
        <SparklineChart data={sparklineData} />
      </td>
    </tr>
  );
}