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

import resets from '../../_resets.module.css';
import { UnionIcon } from './UnionIcon.js';
import { VectorIcon2 } from './VectorIcon2.js';
import { VectorIcon3 } from './VectorIcon3.js';
import { VectorIcon } from './VectorIcon.js';
import { VectorStrokeIcon2 } from './VectorStrokeIcon2.js';
import { VectorStrokeIcon3 } from './VectorStrokeIcon3.js';
import { VectorStrokeIcon } from './VectorStrokeIcon.js';
import classes from './ViewList2.module.css';

interface Props {
  className?: string;
  swap?: {
    union?: ReactNode;
  };
}
/* @figmaId 5404:5822 */
export const ViewList2: FC<Props> = memo(function ViewList2(props = {}) {
  return (
    <div className={`${resets.storybrainResets} ${classes.root}`}>
      <div className={classes.rectangle3}></div>
      <div className={classes.union}>{props.swap?.union || <UnionIcon className={classes.icon} />}</div>
      <div className={classes.vectorStroke}>
        <VectorStrokeIcon className={classes.icon2} />
      </div>
      <div className={classes.vectorStroke2}>
        <VectorStrokeIcon2 className={classes.icon3} />
      </div>
      <div className={classes.vectorStroke3}>
        <VectorStrokeIcon3 className={classes.icon4} />
      </div>
      <div className={classes.vector}>
        <VectorIcon className={classes.icon5} />
      </div>
      <div className={classes.vector2}>
        <VectorIcon2 className={classes.icon6} />
      </div>
      <div className={classes.vector3}>
        <VectorIcon3 className={classes.icon7} />
      </div>
    </div>
  );
});
