import React, { forwardRef, useMemo } from 'react';
import { clsx } from 'clsx';
import { IconButton as RadixIconButton } from '@radix-ui/themes';
import { convertSize } from '../utils/convert-icon-button-size';
import type { ButtonProps } from './button.type';

export type IconButtonProps = ButtonProps;
export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref): React.ReactNode => {
    const { size, style, variant, ...restProps } = props;

    const radixSize = useMemo(() => {
      return convertSize(size);
    }, [size]);

    const radixVariant = useMemo(() => {
      if (variant === 'transparent') return 'ghost';
      return variant;
    }, [variant]);

    const className = useMemo(() => {
      return clsx(props.className, { transparent: variant === 'transparent' });
    }, [props.className, variant]);

    return (
      <RadixIconButton
        style={style}
        type="button"
        variant={radixVariant}
        {...restProps}
        className={className}
        ref={ref}
        size={radixSize}
      />
    );
  }
);

IconButton.displayName = 'IconButton';
