"use client"

import Link from "next/link"

import { IconByIconName } from "@/components/Icons/IconByIconName"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import styles from "./headerLink.module.css"

import type { HeaderLinkProps } from "@/types/components/header/headerLink"

export default function HeaderLink({
  children,
  href,
  iconName,
  iconSize = 20,
  onClick = () => undefined,
}: HeaderLinkProps) {
  return (
    <Caption type="regular" color="textMediumContrast" asChild>
      <Link href={href} className={styles.headerLink} onClick={onClick}>
        {iconName ? (
          <IconByIconName
            iconName={iconName}
            className={styles.icon}
            size={iconSize}
          />
        ) : null}
        {children}
      </Link>
    </Caption>
  )
}