import { useId } from "react";

import {
  SYMBOL_ACCENT,
  SYMBOL_FILL,
  SYMBOL_STROKE,
  SymbolSvg,
} from "./primitives";
import type { ComponentSymbolRendererProps } from "./types";

const MECHANICAL_LINE_WIDTH = 1.8;
const MECMAS21_STROKE = "#00af00";
const MECMAS21_HATCH = "#66cf66";
const MECMAS21_FILL = "#ffffff";
const MECMAS21_CONTENT_SCALE = 0.72;
const MECMAS21_CONTENT_CENTER = { x: 32, y: 24 } as const;
const MECMAS21_CONTENT_TRANSFORM = `translate(${MECMAS21_CONTENT_CENTER.x} ${MECMAS21_CONTENT_CENTER.y}) scale(${MECMAS21_CONTENT_SCALE}) translate(${-MECMAS21_CONTENT_CENTER.x} ${-MECMAS21_CONTENT_CENTER.y})`;
const MECMAS21_SELECTION_ENVELOPE = {
  x: 9.608,
  y: 2.328,
  width: 44.784,
  height: 43.344,
} as const;
const F000_CONTENT_SCALE = 0.25;
const F000_CONTENT_CENTER = { x: 32, y: 24 } as const;
const F000_CONTENT_TRANSFORM = `translate(${F000_CONTENT_CENTER.x} ${F000_CONTENT_CENTER.y}) scale(${F000_CONTENT_SCALE}) translate(${-F000_CONTENT_CENTER.x} ${-F000_CONTENT_CENTER.y})`;
const F000_FRAME_RIGHT_X =
  F000_CONTENT_CENTER.x +
  (52 - F000_CONTENT_CENTER.x) * F000_CONTENT_SCALE;
export const F000_PORT_ANCHOR = {
  x: 48,
  y: 24,
} as const;
const FORC_STROKE = "#00af00";
const FORC_CONTENT_SCALE = 0.64;
const FORC_CONTENT_CENTER = { x: 32, y: 24 } as const;
const FORC_CONTENT_TRANSFORM = `translate(${FORC_CONTENT_CENTER.x} ${FORC_CONTENT_CENTER.y}) scale(${FORC_CONTENT_SCALE}) translate(${-FORC_CONTENT_CENTER.x} ${-FORC_CONTENT_CENTER.y})`;
export const FORC_PORT_ANCHORS = {
  left: {
    x:
      FORC_CONTENT_CENTER.x +
      (2 - FORC_CONTENT_CENTER.x) * FORC_CONTENT_SCALE,
    y: FORC_CONTENT_CENTER.y,
  },
  right: {
    x:
      FORC_CONTENT_CENTER.x +
      (62 - FORC_CONTENT_CENTER.x) * FORC_CONTENT_SCALE,
    y: FORC_CONTENT_CENTER.y,
  },
} as const;
export const MECMAS21_PORT_ANCHORS = {
  left: {
    x:
      MECMAS21_CONTENT_CENTER.x +
      (2 - MECMAS21_CONTENT_CENTER.x) * MECMAS21_CONTENT_SCALE,
    y: 24,
  },
  right: {
    x:
      MECMAS21_CONTENT_CENTER.x +
      (62 - MECMAS21_CONTENT_CENTER.x) * MECMAS21_CONTENT_SCALE,
    y: 24,
  },
} as const;
const LSTP00A_STROKE = "#00af00";
const LSTP00A_STROKE_WIDTH = 3;
const LSTP00A_CONTENT_SCALE = (64 * 0.65) / 60;
const LSTP00A_CONTENT_CENTER = { x: 32, y: 24 } as const;
const LSTP00A_CONTENT_TRANSFORM = `translate(${LSTP00A_CONTENT_CENTER.x} ${LSTP00A_CONTENT_CENTER.y}) scale(${LSTP00A_CONTENT_SCALE}) translate(${-LSTP00A_CONTENT_CENTER.x} ${-LSTP00A_CONTENT_CENTER.y})`;
export const LSTP00A_PORT_ANCHORS = {
  left: {
    x:
      LSTP00A_CONTENT_CENTER.x +
      (2 - LSTP00A_CONTENT_CENTER.x) * LSTP00A_CONTENT_SCALE,
    y: LSTP00A_CONTENT_CENTER.y,
  },
  right: {
    x:
      LSTP00A_CONTENT_CENTER.x +
      (62 - LSTP00A_CONTENT_CENTER.x) * LSTP00A_CONTENT_SCALE,
    y: LSTP00A_CONTENT_CENTER.y,
  },
} as const;
const PNRP17_STROKE = "#8b134f";
const PNRP17_FILL = "#cf9db6";
const PNRP17_LIGHT_FILL = "#f5ebf0";
// PNRP17 使用最终像素线宽；几何缩放不再改变参考图中的粗细层级。
const PNRP17_PRIMARY_STROKE_WIDTH = 2.1;
const PNRP17_DETAIL_STROKE_WIDTH = 1.9;
const PNRP17_VERTICAL_CENTER = 24.5;
const PNRP17_VERTICAL_SCALE = 1.21;
const PNRP17_CONTENT_TRANSFORM = `translate(0 ${PNRP17_VERTICAL_CENTER}) scale(1 ${PNRP17_VERTICAL_SCALE}) translate(0 ${-PNRP17_VERTICAL_CENTER})`;
const pnrp17ScaledY = (y: number) =>
  PNRP17_VERTICAL_CENTER +
  (y - PNRP17_VERTICAL_CENTER) * PNRP17_VERTICAL_SCALE;
export const PNRP17_PORT_ANCHORS = {
  bottom: { x: 25.5, y: pnrp17ScaledY(48) },
  upperLeft: { x: 2, y: pnrp17ScaledY(4.4) },
  middleLeft: { x: 2, y: pnrp17ScaledY(24.1) },
  upperRight: { x: 62, y: pnrp17ScaledY(4.4) },
  middleRight: { x: 62, y: pnrp17ScaledY(24.1) },
} as const;

const mechanicalStroke = {
  fill: "none",
  stroke: SYMBOL_STROKE,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
  strokeWidth: MECHANICAL_LINE_WIDTH,
};

function MechanicalSocket({ side }: { side: "left" | "right" }) {
  const facingLeft = side === "left";
  return (
    <g
      fill="none"
      stroke={MECMAS21_STROKE}
      strokeLinecap="butt"
      strokeLinejoin="miter"
    >
      <path
        d={facingLeft ? "M2 24h4.2" : "M57.8 24H62"}
        strokeWidth="0.9"
      />
      <path
        d={
          facingLeft
            ? "M14 18.5H6.2v11H14"
            : "M50 18.5h7.8v11H50"
        }
        strokeWidth="2.5"
      />
    </g>
  );
}

export function AmesimF000Symbol() {
  return (
    <SymbolSvg className="component-symbol-amesim-f000" domain="mechanical">
      <g data-f000-part="symbol">
        <path
          d={`M${F000_FRAME_RIGHT_X} ${F000_PORT_ANCHOR.y}H${F000_PORT_ANCHOR.x}`}
          data-f000-part="extension"
          stroke={SYMBOL_STROKE}
          strokeLinecap="butt"
          strokeWidth="1.5"
        />
        <g data-f000-part="body" transform={F000_CONTENT_TRANSFORM}>
          <rect
            data-f000-part="frame"
            fill="#ffffff"
            height="34"
            stroke={SYMBOL_STROKE}
            strokeLinejoin="miter"
            strokeWidth="2.5"
            width="52"
            x="0"
            y="7"
          />
        </g>
      </g>
    </SymbolSvg>
  );
}

export function AmesimForcSymbol() {
  return (
    <SymbolSvg className="component-symbol-amesim-forc" domain="mechanical">
      <g data-forc-part="symbol" transform={FORC_CONTENT_TRANSFORM}>
        <path
          d="M2 24H18"
          data-forc-part="left-extension"
          stroke={FORC_STROKE}
          strokeLinecap="butt"
          strokeWidth="1.5"
        />
        <path
          d="M11.5 19.8 18 24 11.5 28.2"
          data-forc-part="input-arrow"
          fill="none"
          stroke={FORC_STROKE}
          strokeLinecap="butt"
          strokeLinejoin="miter"
          strokeWidth="2"
        />
        <rect
          data-forc-part="mechanical-socket"
          fill="#ffffff"
          height="10"
          stroke={FORC_STROKE}
          strokeLinejoin="miter"
          strokeWidth="2"
          width="14"
          x="39"
          y="19"
        />
        <path
          d="M53 24H62"
          data-forc-part="right-extension"
          stroke={FORC_STROKE}
          strokeLinecap="butt"
          strokeWidth="1.5"
        />
        <circle
          cx="30"
          cy="24"
          data-forc-part="force-circle"
          fill="#ffffff"
          r="12"
          stroke={FORC_STROKE}
          strokeWidth="2"
        />
        <text
          data-forc-part="label"
          dominantBaseline="central"
          fill={FORC_STROKE}
          fontFamily="Arial, sans-serif"
          fontSize="15"
          fontWeight="600"
          textAnchor="middle"
          x="30"
          y="24"
        >
          F
        </text>
      </g>
    </SymbolSvg>
  );
}

export function AmesimMecmas21Symbol({
  parameters,
}: ComponentSymbolRendererProps) {
  const frictionEnabled = Number(parameters?.useFriction ?? 2) === 2;
  const stopType = Number(parameters?.stoptype ?? 1);
  const limitsEnabled = stopType === 1 || stopType === 2 || stopType === 3;
  const showGuides = frictionEnabled || limitsEnabled;
  const variant = frictionEnabled
    ? limitsEnabled
      ? "friction-limited"
      : "friction-unlimited"
    : limitsEnabled
      ? "plain-limited"
      : "plain-unlimited";
  const hatchingId = `mecmas21-hatching-${useId().replace(
    /[^a-zA-Z0-9_-]/g,
    "",
  )}`;

  return (
    <SymbolSvg
      className="component-symbol-amesim-mecmas21"
      domain="mechanical"
    >
      <defs>
        <pattern
          height="5.05"
          id={hatchingId}
          patternUnits="userSpaceOnUse"
          width="5.05"
        >
          <rect fill={MECMAS21_FILL} height="5.05" width="5.05" />
          <path
            d="M-1 1 1-1M0 5.05 5.05 0M4.05 6.05 6.05 4.05"
            stroke={MECMAS21_HATCH}
            strokeWidth="1"
          />
        </pattern>
      </defs>
      <g
        data-mecmas-friction={frictionEnabled ? "enabled" : "disabled"}
        data-mecmas-limits={limitsEnabled ? "finite" : "unlimited"}
        data-mecmas-variant={variant}
        transform={MECMAS21_CONTENT_TRANSFORM}
      >
        {showGuides ? (
          <g data-mecmas-part="guides">
            <rect
              data-mecmas-part="upper-guide"
              fill={`url(#${hatchingId})`}
              height="8.5"
              stroke={MECMAS21_STROKE}
              strokeWidth="1.2"
              width="61"
              x="1.5"
              y="-5.5"
            />
            {limitsEnabled ? (
              <g data-mecmas-part="finite-lower-guide">
                <path
                  d="M1.5 34.5H9V45H55V34.5H62.5V53.5H1.5Z"
                  fill={`url(#${hatchingId})`}
                  stroke={MECMAS21_STROKE}
                  strokeLinejoin="miter"
                  strokeWidth="1.2"
                />
              </g>
            ) : (
              <rect
                data-mecmas-part="unlimited-lower-guide"
                fill={`url(#${hatchingId})`}
                height="8.5"
                stroke={MECMAS21_STROKE}
                strokeWidth="1.2"
                width="61"
                x="1.5"
                y="45"
              />
            )}
          </g>
        ) : null}
        {frictionEnabled ? (
          <path
            d="M16.5 5.25h4.9m3.8 0h4.9m3.9 0h4.9m3.8 0h4.9M16.5 42.75h4.9m3.8 0h4.9m3.9 0h4.9m3.8 0h4.9"
            data-mecmas-part="friction-markers"
            stroke={MECMAS21_STROKE}
            strokeLinecap="butt"
            strokeWidth="0.92"
          />
        ) : null}
        <g data-mecmas-part="core">
          <MechanicalSocket side="left" />
          <MechanicalSocket side="right" />
          <rect
            data-mecmas-part="mass"
            fill={MECMAS21_FILL}
            height="34"
            stroke={MECMAS21_STROKE}
            strokeWidth="2.5"
            width="36"
            x="14"
            y="7"
          />
          <text
            dominantBaseline="central"
            fill={MECMAS21_STROKE}
            fontFamily="Arial, sans-serif"
            fontSize="10"
            fontWeight="500"
            textAnchor="middle"
            x="32"
            y="31"
          >
            M
          </text>
          <path
            d="M18.8 16.8H25M21.9 13.8v6"
            fill="none"
            stroke={MECMAS21_STROKE}
            strokeLinecap="square"
            strokeWidth="1.05"
          />
          <path
            d="M46 16.8 39.5 12v3.6h-13V18h13v3.6Z"
            fill={MECMAS21_STROKE}
          />
        </g>
      </g>
      {/* 固定选择包络：参数切换为仅中央滑块时，虚线框仍保持完整状态大小。 */}
      <rect
        data-mecmas-part="selection-envelope"
        fill="transparent"
        height={MECMAS21_SELECTION_ENVELOPE.height}
        pointerEvents="none"
        width={MECMAS21_SELECTION_ENVELOPE.width}
        x={MECMAS21_SELECTION_ENVELOPE.x}
        y={MECMAS21_SELECTION_ENVELOPE.y}
      />
    </SymbolSvg>
  );
}

export function AmesimLstp00aSymbol() {
  return (
    <SymbolSvg className="component-symbol-amesim-lstp00a" domain="mechanical">
      <g
        data-lstp00a-part="symbol"
        fill="#ffffff"
        stroke={LSTP00A_STROKE}
        strokeLinecap="butt"
        strokeLinejoin="miter"
        strokeWidth={LSTP00A_STROKE_WIDTH}
        transform={LSTP00A_CONTENT_TRANSFORM}
      >
        <path
          d="M2 24H7.5"
          data-lstp00a-part="left-extension"
          fill="none"
        />
        <path
          d="M56.5 24H62"
          data-lstp00a-part="right-extension"
          fill="none"
        />
        <path
          data-lstp00a-part="left-socket"
          d="M13.75 19.75H6.25V28.25H13.75"
          fill="none"
        />
        <path
          data-lstp00a-part="right-socket"
          d="M49.75 19.75H57.25V28.25H49.75"
          fill="none"
        />
        <path
          d="M28.75 17.2C31.2 16 32.6 0 35 0c1.4 0 2.2 17.2 3.7 17.2 2.8 0 3.8-16 7.3-16"
          data-lstp00a-part="spring"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M28.75 39H36M41 39H46M36 31V47M33.75 27H41V50.5H33.75"
          data-lstp00a-part="lower-link"
          fill="none"
        />
        <rect
          data-lstp00a-part="left-rail"
          height="53"
          width="3.75"
          x="13.75"
          y="-2.5"
        />
        <rect
          data-lstp00a-part="middle-rail"
          height="53"
          width="3.75"
          x="25"
          y="-2.5"
        />
        <rect
          data-lstp00a-part="right-rail"
          height="53"
          width="3.75"
          x="46"
          y="-2.5"
        />
      </g>
    </SymbolSvg>
  );
}

export const LMECHN1_DEFAULT_RIGHT_PORT_COUNT = 2;
export const LMECHN1_MAX_RIGHT_PORT_COUNT = 20;
const LMECHN1_PALETTE_RIGHT_PORT_COUNT = 5;
const LMECHN1_PORT_ROW_SPACING = 13;
const LMECHN1_BODY_LEFT = 18;
const LMECHN1_BODY_RIGHT = 46;
const LMECHN1_SOCKET_WIDTH = 6;
const LMECHN1_SOCKET_HALF_HEIGHT = 2.5;
const LMECHN1_LEFT_SOCKET_OUTER_X = LMECHN1_BODY_LEFT - LMECHN1_SOCKET_WIDTH;
const LMECHN1_RIGHT_SOCKET_OUTER_X = LMECHN1_BODY_RIGHT + LMECHN1_SOCKET_WIDTH;

export function lmechn1RightPortCount(
  parameters?: ComponentSymbolRendererProps["parameters"],
) {
  const candidate = Number(parameters?.v1);
  if (!Number.isInteger(candidate)) {
    return LMECHN1_DEFAULT_RIGHT_PORT_COUNT;
  }
  return Math.min(
    LMECHN1_MAX_RIGHT_PORT_COUNT,
    Math.max(1, candidate),
  );
}

export function lmechn1SymbolMetrics(
  parameters?: ComponentSymbolRendererProps["parameters"],
) {
  const rightPortCount = lmechn1RightPortCount(parameters);
  const requestedBodyHeight = Math.max(
    28,
    12 + (rightPortCount - 1) * LMECHN1_PORT_ROW_SPACING,
  );
  const viewBoxHeight = Math.max(48, requestedBodyHeight + 8);
  const bodyHeight = Math.min(requestedBodyHeight, viewBoxHeight - 8);
  const bodyTop = (viewBoxHeight - bodyHeight) / 2;
  const rightPortSpan = (rightPortCount - 1) * LMECHN1_PORT_ROW_SPACING;
  const firstPortY = (viewBoxHeight - rightPortSpan) / 2;
  const rightPortRows = Array.from(
    { length: rightPortCount },
    (_, index) => firstPortY + index * LMECHN1_PORT_ROW_SPACING,
  );
  return {
    bodyHeight,
    bodyTop,
    rightPortCount,
    rightPortRows,
    viewBoxHeight,
  } as const;
}

export function AmesimLmechn1Symbol({
  parameters,
  surface,
}: ComponentSymbolRendererProps) {
  // 组件库始终展示一个固定、易辨识的标准图；工作区才按实际端口数展开。
  const metrics = lmechn1SymbolMetrics(
    surface === "palette"
      ? { ...parameters, v1: LMECHN1_PALETTE_RIGHT_PORT_COUNT }
      : parameters,
  );
  const centerY = metrics.viewBoxHeight / 2;
  return (
    <SymbolSvg className="component-symbol-amesim-lmechn1" domain="mechanical">
      <rect
        data-lmechn1-part="body"
        fill={SYMBOL_FILL}
        height={metrics.bodyHeight}
        rx="1"
        stroke={SYMBOL_STROKE}
        strokeWidth="2.5"
        width={LMECHN1_BODY_RIGHT - LMECHN1_BODY_LEFT}
        x={LMECHN1_BODY_LEFT}
        y={metrics.bodyTop}
      />
      {metrics.rightPortRows.map((y, index) => (
        <g data-lmechn1-port={`port_${index + 1}`} key={index}>
          <path
            d={`M${LMECHN1_RIGHT_SOCKET_OUTER_X} ${y}H62`}
            data-lmechn1-part="right-port-line"
            fill="none"
            stroke={SYMBOL_STROKE}
            strokeLinecap="butt"
            strokeWidth="1.5"
          />
          <path
            d={`M${LMECHN1_BODY_RIGHT} ${y - LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_RIGHT_SOCKET_OUTER_X}V${y + LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_BODY_RIGHT}`}
            data-lmechn1-part="right-port-socket"
            fill="none"
            stroke={SYMBOL_STROKE}
            strokeLinecap="butt"
            strokeLinejoin="miter"
            strokeWidth="1.5"
          />
        </g>
      ))}
      <g data-lmechn1-part="reference-port">
        <path
          d={`M2 ${centerY}H${LMECHN1_LEFT_SOCKET_OUTER_X}`}
          data-lmechn1-part="reference-port-line"
          fill="none"
          stroke={SYMBOL_STROKE}
          strokeLinecap="butt"
          strokeWidth="1.5"
        />
        <path
          d={`M${LMECHN1_BODY_LEFT} ${centerY - LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_LEFT_SOCKET_OUTER_X}V${centerY + LMECHN1_SOCKET_HALF_HEIGHT}H${LMECHN1_BODY_LEFT}`}
          data-lmechn1-part="reference-port-socket"
          fill="none"
          stroke={SYMBOL_STROKE}
          strokeLinecap="butt"
          strokeLinejoin="miter"
          strokeWidth="1.5"
        />
      </g>
      <text
        data-lmechn1-part="label"
        fill={SYMBOL_STROKE}
        fontFamily="Arial, sans-serif"
        fontSize="6.2"
        fontWeight="600"
        stroke="none"
        textAnchor="middle"
        x="32"
        y={centerY - 6.2}
      >
        <tspan x="32">linear</tspan>
        <tspan dy="6.5" x="32">node</tspan>
        <tspan dy="6.5" x="32">(displ.)</tspan>
      </text>
    </SymbolSvg>
  );
}

function Pnrp17ArrowPair({ centerY }: { centerY: number }) {
  return (
    <g
      data-pnrp17-part="chamber-arrows"
      fill="none"
      stroke={PNRP17_STROKE}
      strokeLinecap="butt"
      strokeLinejoin="miter"
      strokeWidth={PNRP17_DETAIL_STROKE_WIDTH}
      transform={`translate(0 ${centerY})`}
    >
      <g data-pnrp17-arrow="left" transform="translate(18.2 0)">
        <path d="M9.1 0H3.9" />
        <path d="M3.9 -2.5 0 0 3.9 2.5Z" fill="#ffffff" />
      </g>
      <g
        data-pnrp17-arrow="right"
        transform="translate(38.8 0) scale(-1 1)"
      >
        <path d="M9.1 0H3.9" />
        <path d="M3.9 -2.5 0 0 3.9 2.5Z" fill="#ffffff" />
      </g>
    </g>
  );
}

export function AmesimPnrp17Symbol() {
  return (
    <SymbolSvg className="component-symbol-amesim-pnrp17" domain="mechanical">
      <g data-pnrp17-part="symbol" transform={PNRP17_CONTENT_TRANSFORM}>
        <path
          data-pnrp17-part="upper-shell"
          d="M13.4 1.1H51.4V3h4.1v2.9h-4.1v1.9H18.2V21.1H3.3V7.3H13.4V5.9H9.3V3h4.1Z"
          fill={PNRP17_FILL}
          stroke={PNRP17_STROKE}
          strokeLinejoin="miter"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
        />
        <rect
          data-pnrp17-part="upper-left-wall"
          fill={PNRP17_STROKE}
          height="13.8"
          width="2.9"
          x="15.3"
          y="7.3"
        />
        <path
          data-pnrp17-part="lower-left-shell"
          d="M3.3 27H18.2V40.7H20V46.6H3.3Z"
          fill={PNRP17_FILL}
          stroke={PNRP17_STROKE}
          strokeLinejoin="miter"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
        />
        <rect
          data-pnrp17-part="lower-left-wall"
          fill={PNRP17_STROKE}
          height="13.7"
          width="2.9"
          x="15.3"
          y="27"
        />
        <path
          data-pnrp17-part="lower-base"
          d="M28 40.5h28.5v6.7H28Z"
          fill={PNRP17_FILL}
          stroke={PNRP17_STROKE}
          strokeLinejoin="miter"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
        />
        <rect
          data-pnrp17-part="piston-sleeve"
          fill={PNRP17_LIGHT_FILL}
          height="34"
          stroke={PNRP17_STROKE}
          strokeLinejoin="miter"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
          width="7.7"
          x="40.8"
          y="7.2"
        />
        <rect
          data-pnrp17-part="piston-face"
          fill={PNRP17_STROKE}
          height="34"
          width="1.8"
          x="38.8"
          y="7.2"
        />
        <rect
          data-pnrp17-part="horizontal-rod-left"
          fill={PNRP17_LIGHT_FILL}
          height="2.8"
          stroke={PNRP17_STROKE}
          strokeLinejoin="miter"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
          width="31.5"
          x="9.3"
          y="22.7"
        />
        <rect
          data-pnrp17-part="horizontal-rod-right"
          fill={PNRP17_LIGHT_FILL}
          height="2.8"
          stroke={PNRP17_STROKE}
          strokeLinejoin="miter"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
          width="7.7"
          x="47.8"
          y="22.7"
        />
        <path
          data-pnrp17-part="horizontal-extensions"
          d="M2 4.4h7.3m46.2 0H62M2 24.1h7.3m46.2 0H62"
          fill="none"
          stroke={PNRP17_STROKE}
          strokeLinecap="butt"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
        />
        <path
          data-pnrp17-part="bottom-port"
          d="M25.5 43.4V48"
          fill="none"
          stroke={PNRP17_STROKE}
          strokeLinecap="butt"
          strokeWidth={PNRP17_PRIMARY_STROKE_WIDTH}
        />
        <Pnrp17ArrowPair centerY={15.15} />
        <Pnrp17ArrowPair centerY={32.9} />
      </g>
    </SymbolSvg>
  );
}