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

import resets from "../../_resets.module.css";
import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
import { Keyboard_arrow_up } from "../Keyboard_arrow_up/Keyboard_arrow_up";
import { NotebookOne } from "../NotebookOne/NotebookOne";
import classes from "./_OnSelected.module.css";
import { UnionIcon2 } from "./UnionIcon2.js";
import { UnionIcon3 } from "./UnionIcon3.js";
import { UnionIcon4 } from "./UnionIcon4.js";
import { UnionIcon5 } from "./UnionIcon5.js";
import { UnionIcon6 } from "./UnionIcon6.js";
import { UnionIcon } from "./UnionIcon.js";
import { VectorIcon } from "./VectorIcon.js";
import { PageName } from "../Yidian";

type Props = {
  className?: string;
  swap?: {
    notebookOne?: ReactNode;
  };
  text?: {
    normal?: ReactNode;
  };
} & DOMAttributes<Element>;
/* @figmaId 5401:45221 */
export const _OnSelected: FC<Props> = memo(function _OnSelected(props = {}) {
  return (
    <div
      className={`${resets.storybrainResets} ${classes.root}`}
      onClick={props.onClick}
    >
      <div className={classes.frame681}>
        <div className={classes.frame680}>
          {props.text?.normal != null ? (
            props.text?.normal
          ) : (
            <div className={classes.normal}>item</div>
          )}
        </div>
        {props.swap?.notebookOne || (
          <NotebookOne
            className={classes.notebookOne}
            swap={{
              union: <UnionIcon className={classes.icon} />,
              union2: <UnionIcon2 className={classes.icon2} />,
              union3: <UnionIcon3 className={classes.icon3} />,
              union4: <UnionIcon4 className={classes.icon4} />,
              union5: <UnionIcon5 className={classes.icon5} />,
              union6: <UnionIcon6 className={classes.icon6} />,
            }}
          />
        )}
      </div>
      <Keyboard_arrow_up
        className={classes.keyboard_arrow_up}
        swap={{
          vector: <VectorIcon className={classes.icon7} />,
        }}
      />
    </div>
  );
});
