'use client'
import { useState } from 'react'
import { Check, Copy } from 'lucide-react'
import { Highlight, themes } from 'prism-react-renderer'
interface CodeBlockProps {
children: any
className?: string
}
export function CodeBlock({ children, className }: CodeBlockProps) {
const [copied, setCopied] = useState(false)
// Extract code and language
const code = typeof children === 'string'
? children
: children?.props?.children || ''
const language = className?.replace('language-', '') || 'text'
const handleCopy = async () => {
await navigator.clipboard.writeText(code)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<div className="relative group my-6">
<Highlight
theme={themes.nightOwl}
code={code.trim()}
language={language}
>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre
className={`${className} rounded-lg p-4 overflow-x-auto text-sm`}
style={style}
>
<code>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</code>
</pre>
)}
</Highlight>
{/* Copy button */}
<button
onClick={handleCopy}
className="absolute top-2 right-2 p-2 bg-gray-700 hover:bg-gray-600 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity"
aria-label="Copy code"
>
{copied ? (
<Check className="w-4 h-4" />
) : (
<Copy className="w-4 h-4" />
)}
</button>
</div>
)
}
