import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
import cx from 'clsx';
import { MouseEvent, MouseEventHandler, RefObject, useCallback } from 'react';
import styles from './ActionIcon.module.css';

type ActionIconProps = {
  icon: IconProps['icon'];
  onClick?: MouseEventHandler<HTMLButtonElement>;
  extendClassName?: HTMLButtonElement['className'];
  ref?: RefObject<HTMLButtonElement>;
};

export function ActionIcon({ icon, onClick, extendClassName, ref }: ActionIconProps) {
  const handleClick = useCallback(
    (event: MouseEvent<HTMLButtonElement>) => {
      onClick?.(event);
    },
    [onClick],
  );

  return (
    <button
      type="button"
      onClick={handleClick}
      className={cx(styles.action_icon, extendClassName)}
      ref={ref}>
      <Icon icon={icon} className={styles.icon} />
    </button>
  );
}