import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
import Link from "../layout/Link";
import { TwuiHeaderLink } from "./HeaderNav";
import { twMerge } from "tailwind-merge";
import Row from "../layout/Row";

export type TWUI_HEADER_LINK_PROPS = ComponentProps<typeof Link> & {
    link: TwuiHeaderLink;
};

/**
 * # Header Nav Component
 * @className_wrapper twui-header-link
 */
export default function HeaderLink({ link, ...props }: TWUI_HEADER_LINK_PROPS) {
    return (
        <Link
            href={link.url}
            strict={link.strict}
            {...props}
            className={twMerge(
                "grow p-2 hover:opacity-50",
                "twui-header-link",
                props.className
            )}
        >
            <Row>
                {link.icon}
                {link.title}
            </Row>
        </Link>
    );
}