import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';
import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
import Circle from '../common/circle';
import { clsx } from 'clsx';

export type Props = {
  /** @default 48 */
  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
  /** @default 'primary' */
  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
  /** @default 'default' */
  type?: 'default' | 'negative';
  'data-testid'?: string;
} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &
  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
  Pick<
    HTMLAttributes<HTMLDivElement>,
    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
  >;

const IconButton = forwardRef(function IconButton(
  {
    size = 48,
    href = '#',
    children,
    className,
    priority = 'primary',
    type = 'default',
    ...props
  }: Props,
  ref,
) {
  const isLink = href !== '#';
  return (
    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`
    <Circle
      ref={ref}
      as={isLink ? PrimitiveAnchor : PrimitiveButton}
      size={size}
      fixedSize
      className={clsx(
        'np-icon-button',
        `np-icon-button-${priority}-${type}`,
        {
          disabled: props.disabled,
        },
        className,
      )}
      {...(isLink ? { href } : {})}
      {...props}
    >
      {children}
    </Circle>
  );
});

export default IconButton;