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

export const Button = 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 (
      <RadixButton
        style={style}
        type="button"
        variant={radixVariant}
        {...restProps}
        className={className}
        ref={ref}
        size={radixSize}
      />
    );
  }
);

Button.displayName = 'Button';
