---
// Highlighted code block with a copy button — used by CodeDocs.
import Icon from '@ui/Icon.astro'
import { highlightCode } from '@shared/lib/code-example'

interface Props {
  /** The code to display. */
  code: string
  /** Shiki language used for highlighting. */
  lang: string
}

const { code, lang } = Astro.props

const highlighted = await highlightCode(code, lang)
---

<div class="position-relative">
  <button type="button" class="btn btn-icon btn-dark position-absolute m-2 top-0 end-0 z-3" data-bs-toggle="clipboard" data-bs-text={code} aria-label="Copy code">
    <Icon name="clipboard" class="clipboard-label" />
    <Icon name="check" class="clipboard-feedback" />
    <span class="clipboard-feedback visually-hidden">Copied</span>
  </button>
  <Fragment set:html={highlighted} />
</div>