import React from "react";
import { getActiveClasses } from "../utility/active-classes";
import { ButtonProps, ButtonStyles, ButtonColors } from "./ButtonProps.types";

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

    const buttonStyles: { [key in ButtonStyles]: string } = {
      small: "auik-rounded auik-text-base auik-p-1 auik-text-white"
    };

    const buttonColors: { [key in ButtonColors]: string } = {
      blue: "auik-bg-blue-500 hocus:auik-bg-blue-400",
      white: "auik-bg-white hocus:auik-bg-grey-700",
      transparent: "auik-bg-transparent"
    };

    return (
      <Tag
        ref={ref}
        className={getActiveClasses([
          "auik-appearance-none auik-leading-none auik-border-none auik-cursor-pointer auik-transition-bg auik-transition-250 auik-transition-ease auik-inline-flex",
          className,
          ...(buttonStyle ? [buttonStyles[buttonStyle]] : []),
          ...(buttonColor ? [buttonColors[buttonColor]] : [])
        ])}
        {...props}
      >
        {children}
      </Tag>
    );
  }
);

export default Button;