import Link from "next/link"

import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
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,
}: HeaderLinkProps) {
  const Icon = getIconByIconName(iconName)
  return (
    <Caption type="regular" color="textMediumContrast" asChild>
      <Link href={href} className={styles.headerLink}>
        {Icon ? (
          <Icon className={styles.icon} width={iconSize} height={iconSize} />
        ) : null}
        {children}
      </Link>
    </Caption>
  )
}