import { cx } from "class-variance-authority"
import NextLink from "next/link"

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

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

import type { ComponentProps } from "react"

export function MenuLink({
  className,
  children,
  ...props
}: ComponentProps<typeof NextLink>) {
  return (
    <Typography variant="Body/Paragraph/mdRegular">
      <NextLink className={cx(styles.menuLink, className)} {...props}>
        {children}
        <MaterialIcon
          icon="arrow_forward"
          color="CurrentColor"
          className={styles.arrowIcon}
        />
      </NextLink>
    </Typography>
  )
}