import { MouseEvent, ReactElement, forwardRef } from "react";

interface Props {
  variant?:
    | "outlined"
    | "contained"
    | "filled-rounded"
    | "filled-squared"
    | "default";
  disabled?: boolean;
  children: ReactElement | ReactElement[] | string;
  type?: "submit" | "reset" | "button";
  value?: string | string[] | number;
  fullWidth?: boolean;
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
  className?: string;
  size?: "large" | "medium" | "small";
  secondary?: boolean;
}

const Button = forwardRef<HTMLButtonElement, Props>(
  (
    {
      variant,
      disabled,
      children,
      type,
      value,
      fullWidth,
      onClick,
      className = "",
      size = "medium",
      secondary = false,
    }: Props,
    ref,
  ) => {
    return (
      <button
        ref={ref}
        type={type ? type : undefined}
        value={value ? value : undefined}
        className={`btn ${
          !variant && disabled ? "btn-disabled" : ""
        } ${className} btn-${size} btn-${variant}${
          disabled ? "-disabled" : secondary ? "-secondary" : ""
        } ${fullWidth ? "btn--full-width" : ""}`}
        disabled={disabled}
        onClick={onClick}
      >
        {children}
      </button>
    );
  },
);

Button.displayName = "Button";
export { Button };