---
/**
 * Copy-to-clipboard button for content pages.
 *
 * Fetches the page's `.md` companion (served by pages/[...slug].md.ts) on
 * click and writes it to the clipboard. This keeps the button fully generic
 * — the `.md` endpoint handles per-collection conventions (including
 * aggregate pages at `<collection>/full`), and no raw markdown is embedded
 * in the rendered HTML.
 */
import type {ContentFile} from '../lib/content';

interface Props {
    file: ContentFile;
}

const {file} = Astro.props;
const mdUrl = `${file.url}.md`;
---

<button
    class="copy-page-btn relative flex items-center justify-center size-8 rounded shrink-0 select-none border border-transparent text-neutral-600 dark:text-neutral-400 interact:bg-neutral-75 dark:interact:bg-neutral-875 interact:border-neutral-200 dark:interact:border-neutral-800 interact:text-neutral-900 dark:interact:text-white outline-hidden focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-neutral-500 dark:focus-visible:ring-neutral-400 cursor-pointer transition before:content-['Copied!'] before:absolute before:right-full before:top-1/2 before:-translate-y-1/2 before:mr-2 before:px-2 before:py-1 before:text-xs before:font-semibold before:text-white before:bg-neutral-900 dark:before:bg-neutral-100 dark:before:text-neutral-900 before:rounded before:whitespace-nowrap before:opacity-0 before:pointer-events-none data-copied:before:opacity-100 before:transition"
    title="Copy page content"
    data-md-url={mdUrl}
    _={`on click
            fetch @data-md-url as text then
            writeText(result) into navigator.clipboard
            add .icon-\\[radix-icons--check\\] to first <i/> in me
            remove .icon-\\[radix-icons--copy\\] from first <i/> in me
            set @title of me to 'Copied!'
            add @data-copied
            wait 2s
            add .icon-\\[radix-icons--copy\\] to first <i/> in me
            remove .icon-\\[radix-icons--check\\] from first <i/> in me
            set @title of me to 'Copy page content'
            remove @data-copied`}>
    <i class="size-4 icon-[radix-icons--copy]"></i>
</button>
