import { forwardRef } from "react";
import { Flex } from "../flex";
import { StyledLink } from "./link.styled";
import type { WithTestId } from "../../types";

export interface LinkProps extends WithTestId<React.ComponentProps<typeof StyledLink>> {
  children: React.ReactNode;
  href: string;
  icon?: React.ReactNode;
  gap?: React.ComponentProps<typeof Flex>["gap"];
}

export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
  const { icon, href, css, gap, children, variant = "primary", ...rest } = props;

  if (icon)
    return (
      <StyledLink variant={variant} href={href} ref={ref} css={css} {...rest}>
        <Flex align="center" gap={gap ?? 1}>
          {children}
          {icon}
        </Flex>
      </StyledLink>
    );

  return (
    <StyledLink variant={variant} href={href} ref={ref} css={css} {...rest}>
      {children}
    </StyledLink>
  );
});

Link.displayName = "Link";