import NextLink, { LinkProps as NextLinkProps } from "next/link";
import cn from "classnames";

const classes = {
  root: "inline-flex items-center justify-center flex-shrink-0 font-semibold leading-none rounded outline-none transition duration-300 ease-in-out focus:outline-none focus:shadow",
  normal:
    "bg-accent text-light border border-transparent hover:bg-accent-hover",
  outline:
    "border border-border-400 bg-transparent hover:text-light hover:bg-accent hover:border-accent",
  disabled:
    "border border-border-base bg-gray-300 border-border-400 text-body cursor-not-allowed",
  disabledOutline: "border border-border-base text-muted cursor-not-allowed",
  small: "px-3 py-0 h-9 text-sm h-10",
  medium: "px-5 py-0 h-12",
  big: "px-10 py-0 h-14",
};

export interface ButtonProps {
  className?: string;
  variant?: "normal" | "outline";
  size?: "big" | "medium" | "small";
  active?: boolean;
  type?: "submit" | "reset" | "button";
  disabled?: boolean;
}

const LinkButton: React.FC<NextLinkProps & ButtonProps> = ({
  href,
  children,
  className,
  variant = "normal",
  size = "medium",
  active,
  disabled = false,
  ...props
}) => {
  const rootClassName = cn(
    classes.root,
    {
      [classes.normal]: !disabled && variant === "normal",
      [classes.disabled]: disabled && variant === "normal",
      [classes.outline]: !disabled && variant === "outline",
      [classes.disabledOutline]: disabled && variant === "outline",
      [classes.small]: size === "small",
      [classes.medium]: size === "medium",
      [classes.big]: size === "big",
    },
    className
  );

  return (
    <NextLink href={href}>
      <a {...props} className={cn(rootClassName, className)}>
        {children}
      </a>
    </NextLink>
  );
};

export default LinkButton;