import React from "react";
import Link, { LinkProps } from "next/link";

type CommonProps = {
    className?: string;
    children?: React.ReactNode;
    isPrimary?: boolean;
    isSecondary?: boolean;
};

type ButtonAsButton = {
    as?: "button";
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

type ButtonAsAnchor = {
    as: "a";
} & React.AnchorHTMLAttributes<HTMLAnchorElement>;

type ButtonAsLink = {
    as: "link";
} & LinkProps;

type ButtonProps = CommonProps &
    (ButtonAsButton | ButtonAsAnchor | ButtonAsLink);

const Button: React.FC<ButtonProps> = ({
    className,
    children,
    isPrimary,
    isSecondary,
    as = "button",
    ...props
}) => {
    const isLink = as === "link";
    const Component: React.ElementType = isLink ? Link : as;

    return (
        <Component
            className={`relative inline-flex justify-center items-center h-10 px-3.5 rounded-lg text-title-5 cursor-pointer transition-all ${
                isPrimary ? "bg-white text-black hover:bg-white/90" : ""
            } ${
                isSecondary
                    ? "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset] text-white after:absolute after:inset-0 after:border after:border-line after:rounded-lg after:pointer-events-none after:transition-colors hover:after:border-white"
                    : ""
            }  ${className || ""}`}
            {...(isLink ? (props as LinkProps) : props)}
        >
            {children}
        </Component>
    );
};

export default Button;