'use client'

import React, {ReactNode, useRef} from 'react'
import {CopyIcon} from '@/components/icons/CopyIcon'

export function Code({children}: { children: ReactNode }) {
    const preRef = useRef<HTMLPreElement>(null)

    const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        await navigator.clipboard.writeText(preRef.current?.innerText ?? '')
    }

    return (
        <pre className="relative" ref={preRef}>
            <button className="absolute right-0 top-0 m-5" onClick={handleCopy}>
                <CopyIcon className="w-5 h-5"/>
            </button>
            {children}
        </pre>
    )
}