import { ComponentProps, ReactNode } from "react";
import { ArrowUpRight } from "lucide-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;
};

/**
 * # Link With an Arrow
 * @className twui-arrowed-link
 */
export default function ArrowedLink({ link, icon, ...props }: Props) {
    return (
        <Link href={link.url} {...props} {...link.linkProps}>
            <Row>
                <span>{link.title}</span>
                {icon || <ArrowUpRight size={17} />}
            </Row>
        </Link>
    );
}
