import { Icon, IconifyIconProps } from '@iconify-icon/solid';
import cx from 'clsx';
import { Component, JSX } from 'solid-js';

interface ActionIconProps {
  icon: IconifyIconProps['icon'];
  onClick?: () => void;
  class?: JSX.HTMLAttributes<HTMLButtonElement>['class'];
}

const ActionIcon: Component<ActionIconProps> = (props) => {
  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
    e.stopPropagation();
    props.onClick?.();
  };

  return (
    <button class={cx('p-2 rounded-sm', props.class)} onClick={handleClick}>
      <Icon icon={props.icon} class="text-base/[1] stroke-1" />
    </button>
  );
};

export default ActionIcon;