import React from 'react';
import { BoxProps, SilkeBox } from '../silke-box';
import { PopoverOrigin } from '../silke-popover';
import classNames from 'classnames/bind';
import styles from './silke-stacked-icon.scss';

const cl = classNames.bind(styles);

type SilkeStackedIconProps = { iconOrigin?: PopoverOrigin } & BoxProps;

export function SilkeStackedIcon({
  children,
  iconOrigin = 'center-center',
  ...rest
}: SilkeStackedIconProps) {
  return (
    <SilkeBox hAlign="center" vAlign="center" {...rest}>
      <SilkeBox className={cl('stacked', iconOrigin)} hAlign="center" vAlign="center">
        {children}
      </SilkeBox>
    </SilkeBox>
  );
}