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

import resets from "../../_resets.module.css";
import { Unnamed } from "../unnamed/unnamed";
import classes from "./Iconbutton_TertiaryLarge.module.css";
import { UnionIcon } from "./UnionIcon.js";

interface Props {
  className?: string;
  classes?: {
    root?: string;
  };
  swap?: {
    unnamed?: ReactNode;
  };
}
/* @figmaId 5403:1800 */
export const Iconbutton_TertiaryLarge: FC<Props> = memo(
  function Iconbutton_TertiaryLarge(props = {}) {
    return (
      <button
        className={`${resets.storybrainResets} ${props.classes?.root || ""} ${
          props.className || ""
        } ${classes.root}`}
      >
        {props.swap?.unnamed || (
          <Unnamed
            className={classes.unnamed}
            classes={{ union: classes.union }}
            swap={{
              union: (
                <div className={classes.union}>
                  <UnionIcon className={classes.icon} />
                </div>
              ),
            }}
          />
        )}
      </button>
    );
  }
);