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

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref): React.ReactElement => {
    const { size, style, variant, ...restProps } = props;

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

    const mergedStyle = useMemo<ButtonProps['style']>(() => {
      const baseStyle = {
        background: variant === 'transparent' ? 'transparent' : undefined,
        fontWeight: 400,
      };
      return { ...baseStyle, ...style };
    }, [style, variant]);

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

    return (
      <RadixButton
        style={mergedStyle}
        variant={radixVariant}
        {...restProps}
        ref={ref}
        size={radixSize}
      />
    );
  }
);

Button.displayName = 'Button';
