import { IconName } from "@scandic-hotels/design-system/Icons/iconName"

import HeaderLink from "../HeaderLink"

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

import type { Header } from "@scandic-hotels/trpc/types/header"
import type { ComponentProps } from "react"

interface TopLinkProps extends Omit<
  ComponentProps<typeof HeaderLink>,
  "href" | "iconName" | "children"
> {
  isLoggedIn: boolean
  topLink: Header["header"]["topLink"]
  iconSize?: number
}

export default function TopLink({
  isLoggedIn,
  topLink,
  iconSize = 16,
  ...props
}: TopLinkProps) {
  const linkData = isLoggedIn ? topLink.logged_in : topLink.logged_out

  if (!linkData?.url || !linkData?.title) {
    return null
  }

  return (
    <HeaderLink
      href={linkData.url}
      iconName={linkData.icon || IconName.Gift}
      iconSize={iconSize}
      {...props}
    >
      <span className={styles.topLink}>{linkData.title}</span>
    </HeaderLink>
  )
}