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

import resets from "../../_resets.module.css";
import { Unnamed2 } from "../unnamed2/unnamed2";
import classes from "./_3.module.css";
import { Ellipse41Icon } from "./Ellipse41Icon.js";
import { Icon2 } from "./Icon2.js";
import { Icon } from "./Icon.js";
import { Vector12StrokeIcon } from "./Vector12StrokeIcon.js";

interface Props {
  className?: string;
  classes?: {
    root?: string;
  };
  swap?: {
    Unnamed?: ReactNode;
    Unnamed2?: ReactNode;
  };
  hide?: {
    Unnamed?: boolean;
  };
  text?: {
    Unnamed?: ReactNode;
  };
}
/* @figmaId 5526:23497 */
export const _3: FC<Props> = memo(function _3(props = {}) {
  return (
    <div
      className={`${resets.storybrainResets} ${props.classes?.root || ""} ${
        props.className || ""
      } ${classes.root}`}
    >
      <div className={classes.unnamed2}>
        <div className={classes.unnamed3}>
          {props.swap?.unnamed || <Icon className={classes.icon2} />}
        </div>
        <div className={classes.unnamed4}>
          <div className={classes.ellipse41}>
            <Ellipse41Icon className={classes.icon3} />
          </div>
        </div>
        <div className={classes.unnamed5}>
          {props.swap?.unnamed2 || <Icon2 className={classes.icon4} />}
        </div>
      </div>
      <div className={classes.unnamed6}>
        {props.text?.unnamed != null ? (
          props.text?.unnamed
        ) : (
          <div className={classes.unnamed7}>标题</div>
        )}
      </div>
      {!props.hide?.unnamed && <div className={classes.unnamed8}>描述内容</div>}
    </div>
  );
});
