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

import resets from "../../_resets.module.css";
import { Frame3 } from "../Frame3/Frame3";
import { Unnamed5 } from "../unnamed5/unnamed5";
import classes from "./unnamed12.module.css";
import { VectorStrokeIcon2 } from "./VectorStrokeIcon2.js";
import { VectorStrokeIcon3 } from "./VectorStrokeIcon3.js";
import { VectorStrokeIcon } from "./VectorStrokeIcon.js";

interface Props {
  className?: string;
  classes?: {
    root?: string;
  };
  hide?: {
    frame?: boolean;
    Icon?: boolean;
  };
  text?: {
    text?: ReactNode;
  };
}
/* @figmaId 5403:1894 */
export const Unnamed12: FC<Props> = memo(function Unnamed12(props = {}) {
  return (
    <div
      className={`${resets.storybrainResets} ${props.classes?.root || ""} ${
        props.className || ""
      } ${classes.root}`}
    >
      <div className={classes.unnamed}>
        {!props.hide?.frame && (
          <Frame3
            className={classes.frame}
            swap={{
              vectorStroke: <VectorStrokeIcon className={classes.icon} />,
              vectorStroke2: <VectorStrokeIcon2 className={classes.icon2} />,
            }}
          />
        )}
        {props.text?.text != null ? (
          props.text?.text
        ) : (
          <div className={classes.text}>输入框</div>
        )}
        {!props.hide?.Icon && (
          <Unnamed5
            className={classes.Icon}
            swap={{
              vectorStroke: <VectorStrokeIcon3 className={classes.icon3} />,
            }}
          />
        )}
      </div>
    </div>
  );
});
