import { ComponentProps, ReactNode } from "react";
import { TWUI_LINK_LIST_LINK_OBJECT } from "../elements/LinkList";
import Link from "./Link";
import Row from "./Row";

type Props = ComponentProps<typeof Link> & {
    link: TWUI_LINK_LIST_LINK_OBJECT;
    icon: ReactNode;
    iconPosition?: "before" | "after";
};

/**
 * # Link With an Icon
 * @className twui-arrowed-link
 */
export default function IconLink({
    link,
    iconPosition,
    icon,
    ...props
}: Props) {
    return (
        <Link
            href={link.url}
            {...props}
            onClick={(e) => {
                link.onClick?.(e);
                props.onClick?.(e);
            }}
        >
            <Row>
                {iconPosition == "before" || !iconPosition ? icon : null}
                <span>{link.title}</span>
                {iconPosition == "after" ? icon : null}
            </Row>
        </Link>
    );
}