'use client';
import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
interface CopyableCodeBlockProps {
code: string;
label?: string;
}
export function CopyableCodeBlock({ code, label }: CopyableCodeBlockProps) {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy:', err);
}
};
return (
<div className="relative group">
<pre className="bg-bg-overlay text-text-primary p-4 pr-12 rounded-lg overflow-x-auto text-sm">
<code>{code}</code>
</pre>
<button
onClick={handleCopy}
className="absolute top-2 right-2 p-2 rounded-md bg-bg-secondary hover:bg-bg-elevated text-text-secondary hover:text-text-primary transition-colors"
title={copied ? 'Copied!' : 'Copy to clipboard'}
aria-label={label ? `Copy ${label}` : 'Copy to clipboard'}
>
{copied ? (
<Check className="h-4 w-4 text-green-400" />
) : (
<Copy className="h-4 w-4" />
)}
</button>
</div>
);
}
