web/packages/design-system/lib/components/ButtonLink/index.tsx

'use client'

import Link from 'next/link'
import { type ComponentProps, type PropsWithChildren } from 'react'

import { variants } from './variants'

import type { VariantProps } from 'class-variance-authority'
import { useIntl } from 'react-intl'

export interface ButtonLinkProps
  extends PropsWithChildren,
    Omit<ComponentProps<typeof Link>, 'color'>,
    VariantProps<typeof variants> {}

export default function ButtonLink({
  variant,
  color,
  size,
  typography,
  wrapping,
  className,
  href,
  target,
  onClick = () => {},
  ...props
}: ButtonLinkProps) {
  const classNames = variants({
    variant,
    color,
    size,
    wrapping,
    typography,
    className,
  })

  const intl = useIntl()
  const newTabText = intl.formatMessage({
    id: 'common.linkOpenInNewTab',
    defaultMessage: 'Opens in a new tab/window',
  })

  return (
    <Link
      className={classNames}
      href={href}
      target={target}
      onClick={onClick}
      title={target === '_blank' ? newTabText : ''}
      {...props}
    />
  )
}