export const BadgeContainer = ({
  children,
  size = 48,
  borderRadius = 10,
  paddingX = 10,
  backgroundColor = 'var(--color-cyan-82, #B8E2E9)',
  className = '',
  style = {},
  ...props
}) => {
  const resolvedSize = typeof size === 'number' ? `${size}px` : size;
  const resolvedPaddingX = typeof paddingX === 'number' ? `${paddingX}px` : paddingX;

  return (
    <div
      className={className}
      style={{
        width: resolvedSize,
        height: resolvedSize,
        paddingLeft: resolvedPaddingX,
        paddingRight: resolvedPaddingX,
        borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
        backgroundColor,
        opacity: 1,
        transform: 'rotate(0deg)',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxSizing: 'border-box',
        ...style,
      }}
      {...props}
    >
      {children}
    </div>
  );
};

export default BadgeContainer;

