"use client";

import { Handle, Position, type NodeProps } from "@xyflow/react";
import { TimerIcon } from "lucide-react";

export function WaitNode({ data }: NodeProps) {
  const d = data as { ticks?: number; input?: unknown };

  return (
    <div className="bg-yellow-950/80 border border-yellow-500/50 rounded-lg shadow-md min-w-48">
      <Handle type="target" position={Position.Left} className="!bg-yellow-400" />
      <div className="flex items-center gap-2 px-3 py-2 border-b border-yellow-500/30">
        <TimerIcon className="size-4 text-yellow-400 shrink-0" />
        <span className="text-sm font-medium text-yellow-200 flex-1 truncate">
          Wait {d.ticks ?? "10"} ticks
        </span>
      </div>
      <div className="px-3 py-2 text-xs text-yellow-300/80 line-clamp-2">
        {d.input !== undefined ? `Input: ${String(d.input).substring(0, 50)}${String(d.input).length > 50 ? "..." : ""}` : "No input"}
      </div>
      <Handle type="source" position={Position.Right} className="!bg-yellow-400" />
    </div>
  );
}