'use client'

import { cx } from 'class-variance-authority'
import NextLink from 'next/link'
import { TextLinkProps } from './types'
import { variants } from './variants'

import styles from './textLink.module.css'
import { useIntl } from 'react-intl'

export function TextLink({
  theme,
  className,
  isDisabled,
  tabIndex,
  isInline,
  typography,
  ...props
}: TextLinkProps) {
  const intl = useIntl()
  const classNames = variants({
    theme,
    typography,
    className,
  })

  return (
    <NextLink
      {...props}
      tabIndex={isDisabled ? -1 : tabIndex}
      aria-disabled={isDisabled}
      className={cx(classNames, {
        [styles.disabled]: isDisabled,
        [styles.inline]: isInline,
      })}
      title={
        props.target === '_blank'
          ? intl.formatMessage({
              id: 'common.linkOpenInNewTab',
              defaultMessage: 'Opens in a new tab/window',
            })
          : ''
      }
    />
  )
}