export function ScheduleCanvasHeader({
  linkSourceId,
  onCancelLink,
}: {
  linkSourceId: string | null;
  onCancelLink: () => void;
}) {
  return (
    <div className="flex min-h-[53px] items-center justify-between border-b border-[#e4eaf0] px-3">
      <div className="flex min-w-0 flex-col gap-[3px]">
        <strong className="text-[14px] text-ink">流程画布</strong>
        <span className="hidden truncate text-[10px] text-[#93a0ae] 2xl:block">
          拖入稳定版本；点击节点右侧圆点，再点击目标左侧圆点完成连线
        </span>
      </div>
      {linkSourceId && (
        <button
          className="inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-[#dce5ee] bg-white px-3 text-[12px] font-semibold text-[#b25a4f] hover:border-[#aac6e5] hover:bg-[#f6faff] hover:text-[#126aca]"
          type="button"
          onClick={onCancelLink}
        >
          取消连线
        </button>
      )}
    </div>
  );
}