import React from "react";
import classNames from "classnames";
import { Box } from "../Box";
import { Svg } from "../Svg";
import { bem } from "../../utilities/bem";
import { Icon, ICON_TYPE } from "../Icon";

const cn = "ArrowButton";

const Arrow = () => (
  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
    <path d="M20 10.0006L10.2324 -4.26954e-07L7.30217 -5.5504e-07L16.093 9.0005L3.42127e-06 9.0005L3.33385e-06 11.0006L16.093 11.0006L7.30217 20L10.2324 20L20 10.0006Z" />
  </Svg>
);

export interface ArrowButtonProps {
  children?: string;
  as?: any;
  className?: string;
  disabled?: boolean;
  loading?: boolean;
  [key: string]: any;
}

export const ArrowButton = ({
  children,
  as: Component = "a",
  className,
  disabled,
  loading,
  ...rest
}: ArrowButtonProps) => {
  const isDisabled = disabled || loading;
  return (
    <Component
      className={classNames(
        bem(cn),
        isDisabled && bem(cn, { m: "disabled" }),
        className,
      )}
      disabled={Component === "button" && isDisabled}
      {...rest}
    >
      {children}
      <Box className={bem(cn, { e: "arrow" })}>
        {loading ? (
          <Icon className="arrow-button-arrow" icon={ICON_TYPE.SPINNER} spin />
        ) : (
          <Arrow />
        )}
      </Box>
    </Component>
  );
};