import { AnchorHTMLAttributes, DetailedHTMLProps, RefAttributes } from "react";
import { twMerge } from "tailwind-merge";
import { ArrowUpRight, LucideProps } from "lucide-react";

type Props = DetailedHTMLProps<
    AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
> & {
    showArrow?: boolean;
    arrowSize?: number;
    arrowProps?: Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>;
};

/**
 * # General Anchor Elements
 * @className twui-a | twui-anchor
 */
export default function Link({
    showArrow,
    arrowSize = 20,
    arrowProps,
    ...props
}: Props) {
    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",
                "twui-anchor",
                "twui-a",
                props.className
            )}
        >
            {props.children}
            {showArrow && (
                <ArrowUpRight
                    size={arrowSize}
                    {...arrowProps}
                    className={twMerge(
                        "inline-block ml-1 -mt-[1px]",
                        arrowProps?.className
                    )}
                />
            )}
        </a>
    );
}