import React from "react";
import { getActiveClasses } from "../utility/active-classes";

interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  as?: any;
  [key: string]: any;
}

const Button = React.forwardRef(
  ({ as: tag, children, className, ...props }: Props, ref) => {
    const Tag = tag || "button";

    return (
      <Tag
        ref={ref}
        className={getActiveClasses([
          "auik-h-13 auik-flex auik-items-center auik-justify-center hover:auik-bg-blue-500",
          className
        ])}
        {...props}
        data-testid="lhs-button"
      >
        {children}
      </Tag>
    );
  }
);

export default Button;