import classNames from 'classnames';
import { type ButtonHTMLAttributes, type FunctionComponent, type MouseEventHandler, type SVGAttributes } from 'react';

import { Tooltip } from '../Tooltip';

import styles from './IconButton.module.scss';
import { Link } from './Link';

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  'aria-label': string;
  children?: never;
  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
  tooltip: string;
  onClick: MouseEventHandler<HTMLButtonElement>;
}

const IconButtonBase: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
  return (
    <Tooltip tooltip={tooltip}>
      <button className={classNames(styles.iconButton, className)} type="button" {...props}>
        <span className={styles.content}>
          <Icon aria-hidden="true" className={styles.icon} role="img" />
        </span>
      </button>
    </Tooltip>
  );
};

export const IconButton = Object.assign(IconButtonBase, {
  Link,
});