import {
    AnchorHTMLAttributes,
    ButtonHTMLAttributes,
    DetailedHTMLProps,
    HTMLAttributeAnchorTarget,
    HTMLAttributes,
} from "react";
import { ClassNameValue, twMerge } from "tailwind-merge";

export default function Button({
    href,
    target,
    variant,
    color,
    linkProps,
    ...props
}: DetailedHTMLProps<
    ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
> & {
    variant?: "normal" | "ghost" | "outlined";
    color?: "primary" | "secondary" | "accent";
    href?: string;
    target?: HTMLAttributeAnchorTarget;
    linkProps?: DetailedHTMLProps<
        AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
    >;
}) {
    const finalClassName: string = (() => {
        if (variant == "normal" || !variant) {
            if (color == "primary" || !color) return "bg-blue-500 text-white";
        } else if (variant == "outlined") {
            if (color == "primary" || !color)
                return (
                    "bg-transparent outline outline-1 outline-blue-500" +
                    " text-blue-500"
                );
        } else if (variant == "ghost") {
        }

        return "";
    })();

    const buttonComponent = (
        <button
            {...props}
            className={twMerge(
                "bg-blue-600 text-white text-base font-medium px-4 py-2 rounded",
                finalClassName,
                props.className
            )}
        >
            {props.children}
        </button>
    );

    if (href)
        return (
            <a {...linkProps} href={href} target={target}>
                {buttonComponent}
            </a>
        );
    return buttonComponent;
}