import type { ComponentPropsWithoutRef, ElementType, RefObject } from 'react';
import classnames from 'classnames';
import React from 'react';

export type ButtonProps<T extends ElementType> = ComponentPropsWithoutRef<T> & {
  circle?: boolean;
  color?: string;
  innerRef?: RefObject<any>;
  label: string;
  outline?: boolean;
  rounded?: boolean;
  size?: 'xs' | 'sm' | 'lg' | 'xl';
  tag?: T;
};

function Button<T extends ElementType>({
  className,
  circle = false,
  color,
  innerRef,
  label,
  outline = false,
  rounded = false,
  size,
  // @ts-ignore todo: fix this
  tag: Tag = 'button',
  ...props
}: ButtonProps<T>) {
  const type = Tag === 'button' ? 'button' : null;
  const colorString = color ? `btn-${color}` : null;
  const sizeString = size ? `btn-${size}` : null;
  const outlineString = outline ? `btn-outline-${color}` : null;

  return (
    // @ts-ignore todo: fix this
    <Tag
      className={classnames(
        'btn',
        !outline && colorString,
        outlineString,
        sizeString,
        circle && 'btn-circle',
        rounded && 'btn-rounded',
        className
      )}
      data-testid="Button"
      type={type}
      aria-label={label}
      ref={innerRef}
      {...props}
    />
  );
}

export default Button;