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>;
    strict?: boolean;
};

/**
 * # General Anchor Elements
 * @className twui-a | twui-anchor
 * @info use `cancel-link` class name to prevent triggering this link from a child element
 */
export default function Link({
    showArrow,
    arrowSize = 20,
    arrowProps,
    strict,
    ...props
}: Props) {
    return (
        <a
            {...props}
            className={twMerge(
                "text-link-500 no-underline hover:text-link-500/50",
                "text-link dark:text-link-dark hover:opacity-80 transition-all",
                "border-0 border-b border-link dark:border-link-dark border-solid leading-4",
                "twui-anchor",
                "twui-a",
                props.className
            )}
            onClick={(e) => {
                const target = e.target as HTMLElement;

                if (target.closest(".cancel-link")) {
                    e.preventDefault();
                }
                props?.onClick?.(e);
            }}
            data-strict={strict ? "yes" : undefined}
        >
            {props.children}
            {showArrow && (
                <ArrowUpRight
                    size={arrowSize}
                    {...arrowProps}
                    className={twMerge(
                        "inline-block ml-1 -mt-[1px]",
                        arrowProps?.className
                    )}
                />
            )}
        </a>
    );
}