/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { useTheme } from '../Theme';
import { StyledIconButton } from './styled-components';
import { IconButtonProps } from './types.d';

const IconBtn: FunctionComponent<IconButtonProps> = (props): React.ReactElement => {
  const { children, className = '', style, color = 'gray' } = props;
  const theme = useTheme();
  const classNames = cn({
    'square-icon-button': true,
    [className]: true,
  });
  return (
    <div className={classNames}>
      <StyledIconButton
        $theme={theme}
        $color={color}
        disableRipple
        {...props}
        color="inherit"
        className={classNames}
        style={{ padding: 0, ...style }}
        onKeyDown={() => {}}
      >
        {children}
      </StyledIconButton>
    </div>
  );
};

export class IconButton extends React.PureComponent<IconButtonProps> {
  render(): React.ReactElement {
    return <IconBtn {...this.props} />;
  }
}
