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>
  )
}