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

'use client'

import { type ComponentProps } from 'react'

import { variants } from './variants'

import type { VariantProps } from 'class-variance-authority'
import Link from 'next/link'
import { useIntl } from 'react-intl'
import { ButtonIconName } from '../Button/types'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'

export interface ButtonLinkProps
  extends
    Omit<ComponentProps<typeof Link>, 'color'>,
    VariantProps<typeof variants> {
  leadingIconName?: ButtonIconName | null
  trailingIconName?: ButtonIconName | null
}

export default function ButtonLink({
  variant,
  color,
  size,
  wrapping,
  fullWidth,
  className,
  href,
  target,
  leadingIconName,
  trailingIconName,
  children,
  ...props
}: ButtonLinkProps) {
  const classNames = variants({
    variant,
    color,
    size,
    wrapping,
    fullWidth,
    className,
  })

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

  return (
    <Typography
      variant={
        size === 'sm'
          ? 'Body/Supporting text (caption)/smBold'
          : 'Body/Paragraph/mdBold'
      }
    >
      <Link
        className={classNames}
        href={href}
        target={target}
        title={target === '_blank' ? newTabText : ''}
        {...props}
      >
        {leadingIconName ? (
          <MaterialIcon
            icon={leadingIconName}
            color="CurrentColor"
            size={size === 'sm' ? 20 : 24}
          />
        ) : null}
        {children}
        {trailingIconName ? (
          <MaterialIcon
            icon={trailingIconName}
            color="CurrentColor"
            size={size === 'sm' ? 20 : 24}
          />
        ) : null}
      </Link>
    </Typography>
  )
}