import React from 'react';
import classNames from 'classnames/bind';

import s from './IconButton.module.scss';

const cn = classNames.bind(s);

interface IIconButtonProps {
  color?: string;
  children?: React.ReactNode;
  onClick?: () => void;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
}

const IconButton = ({
  color = 'dark',
  children,
  onClick,
  type = 'button',
  disabled = false,
}: IIconButtonProps) => (
  <button
    className={cn(s.iconButton, `color-${color}`, { disabled })}
    onClick={onClick}
    type={type}
    disabled={disabled}
  >
    {React.Children.toArray(children).map((c) =>
      React.isValidElement(c)
        ? React.cloneElement(c, {
            className: cn(s.iconButton__svg, `color-${color}`),
          })
        : c,
    )}
  </button>
);

export default IconButton;