"use client"

import Link from "next/link"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { IconByIconName } from "@/components/Icons/IconByIconName"

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 (
    <Typography variant="Body/Supporting text (caption)/smRegular">
      <Link href={href} className={styles.headerLink} onClick={onClick}>
        {iconName ? (
          <IconByIconName
            iconName={iconName}
            className={styles.icon}
            size={iconSize}
            color="CurrentColor"
          />
        ) : null}
        {children}
      </Link>
    </Typography>
  )
}