import { Button, Caption1 } from '@fluentui/react-components'
import { LinkRegular, DismissRegular } from '@fluentui/react-icons'
import { Banner } from './Banner'

/**
 * The "use this copied/received link?" banner (UI19), shared by the DownloadBar
 * and the Library add-source field, which had identical markup + CSS. Renders the
 * link (with an optional lead-in like "Link received: ") and Use / Dismiss actions
 * on the shared {@link Banner}.
 */
export function LinkSuggestion({
  prefix,
  link,
  onAccept,
  onDismiss,
  dismissLabel
}: {
  /** Short lead-in before the link, e.g. "Use copied link? " or "Link received: ". */
  prefix: string
  link: string
  onAccept: () => void
  onDismiss: () => void
  /** Accessible name for the dismiss button — say what's being dismissed (L153). */
  dismissLabel: string
}): React.JSX.Element {
  return (
    <Banner
      icon={<LinkRegular />}
      actions={
        <>
          <Button size="small" appearance="primary" onClick={onAccept}>
            Use
          </Button>
          <Button
            size="small"
            appearance="subtle"
            icon={<DismissRegular />}
            onClick={onDismiss}
            aria-label={dismissLabel}
          />
        </>
      }
    >
      <Caption1>
        {prefix}
        {link}
      </Caption1>
    </Banner>
  )
}
