ShareButton.tsx

import { CheckOutlined, LinkOutlined } from '@ant-design/icons'
import IconButton from '@mui/material/IconButton'
import { Tooltip } from 'antd'
import { useCallback, useContext, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useLocation } from 'react-router'
import { GlobalSearchContext } from 'src/model/globalState'
import { PageShareParamsContext } from 'src/model/routeContext'
import { buildShareUrl } from './shareUrl'

export const ShareButton = () => {
  const { search } = useContext(GlobalSearchContext)
  const { params: pageParams } = useContext(PageShareParamsContext)
  const location = useLocation()
  const [copied, setCopied] = useState(false)
  const { t } = useTranslation()

  const shareUrl = useMemo(
    () => buildShareUrl(location.pathname, search, pageParams),
    [location.pathname, search, pageParams],
  )

  const handleShare = useCallback(() => {
    navigator.clipboard
      .writeText(shareUrl)
      .then(() => {
        setCopied(true)
        setTimeout(() => setCopied(false), 2000)
      })
      .catch(() => {
        // clipboard API not available; silent fail
      })
  }, [shareUrl])

  const tooltipTitle = copied ? (
    <span>{t('link_copied')}</span>
  ) : (
    <span>
      {t('share_link')}
      <br />
      <span style={{ opacity: 0.75, fontSize: '0.85em', wordBreak: 'break-all' }}>{shareUrl}</span>
    </span>
  )

  return (
    <Tooltip title={tooltipTitle} open={copied || undefined} placement="bottomRight">
      <IconButton
        size="small"
        onClick={handleShare}
        aria-label={copied ? t('link_copied') : t('share_link')}>
        {copied ? <CheckOutlined /> : <LinkOutlined />}
      </IconButton>
    </Tooltip>
  )
}