import React from "react";
import SvgIcon from "../Svg/Icon";
import Button from "../Button";
import { SvgButtonProps } from "./SvgButtonProps.types";
import { getActiveClasses } from "../utility/active-classes";

interface Props extends SvgButtonProps {
  variation?: "filled" | "iconOnly";
  [key: string]: any;
}

const SvgButton = React.forwardRef(
  (
    {
      svgIconProps,
      className,
      size,
      color,
      variation = "filled",
      children,
      ...props
    }: Props,
    ref
  ) => {
    const sizeClasses = {
      small: "auik-h-5 auik-w-5"
    };

    const iconOnlyClasses = {
      blue: "auik-text-blue-500 hocus:auik-text-white"
    };

    return (
      <Button
        className={getActiveClasses([
          className,
          ...(size ? [sizeClasses[size]] : []),
          ...(variation === "iconOnly" ? [iconOnlyClasses[color]] : []),
          "auik-appearance-none auik-flex auik-items-center auik-justify-center auik-rounded-full"
        ])}
        buttonColor={variation === "filled" ? color : null}
        {...props}
        ref={ref}
      >
        <SvgIcon
          className={getActiveClasses(["auik-transition-color"])}
          {...svgIconProps}
        />
        {children}
      </Button>
    );
  }
);

export default SvgButton;