import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './icon-button.css';

export interface IconButtonProps extends css.IconButtonVariants {}

export const IconButton = forwardRef<'button', IconButtonProps>(
  function IconButton(
    {
      as = 'button',
      className,
      children,
      color,
      padding,
      paddingMode,
      ...rest
    },
    ref,
  ) {
    const cn = clsx(className, css.iconButton({ color, padding, paddingMode }));

    return (
      <Box ref={ref} as={as} className={cn} {...rest}>
        {children}
      </Box>
    );
  },
);