import { memo } from "react";
import type { FC, ReactNode } from "react";

import resets from "../../_resets.module.css";
import { NinePointsConnected } from "../NinePointsConnected/NinePointsConnected";
import { ProjectorTwo } from "../ProjectorTwo/ProjectorTwo";
import { UpOne1 } from "../UpOne1/UpOne1";
import { UnionIcon2 } from "./UnionIcon2.js";
import { UnionIcon3 } from "./UnionIcon3.js";
import { UnionIcon } from "./UnionIcon.js";
import classes from "./unnamed14.module.css";
import { VectorIcon } from "./VectorIcon.js";
import { VectorStrokeIcon } from "./VectorStrokeIcon.js";

interface Props {
  className?: string;
  classes?: {
    root?: string;
  };
  swap?: {
    ninePointsConnected?: ReactNode;
  };
  hide?: {
    projectorTwo?: boolean;
  };
  text?: {
    Unnamed?: ReactNode;
    _1?: ReactNode;
    Unnamed2?: ReactNode;
    Unnamed3?: ReactNode;
    Unnamed4?: ReactNode;
  };
}
/* @figmaId 5404:5460 */
export const Unnamed14: FC<Props> = memo(function Unnamed14(props = {}) {
  return (
    <div
      className={`${resets.storybrainResets} ${props.classes?.root || ""} ${
        props.className || ""
      } ${classes.root}`}
    >
      {props.swap?.ninePointsConnected || (
        <NinePointsConnected
          swap={{
            union: <UnionIcon className={classes.icon} />,
            union2: <UnionIcon2 className={classes.icon2} />,
          }}
        />
      )}
      <div className={classes.unnamed}>
        <div className={classes.unnamed2}>
          {!props.hide?.projectorTwo && (
            <ProjectorTwo
              className={classes.projectorTwo}
              classes={{ union: classes.union }}
              swap={{
                union: (
                  <div className={classes.union}>
                    <UnionIcon3 className={classes.icon3} />
                  </div>
                ),
              }}
            />
          )}
          {props.text?.unnamed != null ? (
            props.text?.unnamed
          ) : (
            <div className={classes.unnamed3}>站内在线设备</div>
          )}
        </div>
        <div className={classes.unnamed4}>
          {props.text?._1 != null ? (
            props.text?._1
          ) : (
            <div className={classes._1}>2032</div>
          )}
          {props.text?.unnamed3 != null ? (
            props.text?.unnamed3
          ) : (
            <div className={classes.unnamed5}>个</div>
          )}
        </div>
        <div className={classes.unnamed6}>
          {props.text?.unnamed2 != null ? (
            props.text?.unnamed2
          ) : (
            <div className={classes.unnamed7}>较昨天</div>
          )}
          <UpOne1
            className={classes.upOne1}
            swap={{
              vector: <VectorIcon className={classes.icon4} />,
              vectorStroke: <VectorStrokeIcon className={classes.icon5} />,
            }}
          />
          {props.text?.unnamed4 != null ? (
            props.text?.unnamed4
          ) : (
            <div className={classes.unnamed8}>2</div>
          )}
        </div>
      </div>
    </div>
  );
});
