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

import resets from '../../_resets.module.css';
import classes from './Avatar_Property1MediumProperty.module.css';
import { BorderIcon } from './BorderIcon.js';
import { MaskIcon } from './MaskIcon.js';

interface Props {
  className?: string;
  swap?: {
    mask?: ReactNode;
  };
  text?: {
    rM?: ReactNode;
  };
}
/* @figmaId 5401:45650 */
export const Avatar_Property1MediumProperty: FC<Props> = memo(function Avatar_Property1MediumProperty(props = {}) {
  return (
    <div className={`${resets.storybrainResets} ${classes.root}`}>
      <div className={classes.mask}>{props.swap?.mask || <MaskIcon className={classes.icon} />}</div>
      <div className={classes.border}>
        <BorderIcon className={classes.icon2} />
      </div>
      {props.text?.rM != null ? props.text?.rM : <div className={classes.rM}>RM</div>}
    </div>
  );
});
