import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
import { twMerge } from "tailwind-merge";

/**
 * # General Anchor Elements
 * @className twui-a | twui-anchor
 */
export default function Link({
    ...props
}: DetailedHTMLProps<
    AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
>) {
    return (
        <a
            {...props}
            className={twMerge(
                "text-base text-link-500 no-underline hover:text-link-500/50",
                "text-blue-600 dark:text-blue-400 hover:opacity-60 transition-all",
                "border-0 border-b border-blue-300 dark:border-blue-200/30 border-solid leading-4",
                // "focus:text-red-600",
                "twui-anchor",
                "twui-a",
                props.className
            )}
        >
            {props.children}
        </a>
    );
}