"use client"
import { useState } from "react"
import { Copy, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
interface CodeBlockProps {
children: string
language?: string
title?: string
}
export function CodeBlock({ children, language = "text", title }: CodeBlockProps) {
const [copied, setCopied] = useState(false)
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(children)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
} catch (err) {
console.error("Failed to copy text: ", err)
}
}
return (
<div className="relative">
{title && (
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">{title}</span>
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="h-6 px-2 text-xs"
>
{copied ? (
<>
<Check className="h-3 w-3 mr-1" />
Copied!
</>
) : (
<>
<Copy className="h-3 w-3 mr-1" />
Copy
</>
)}
</Button>
</div>
)}
<div className="relative">
<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm">
<code className={`language-${language}`}>{children}</code>
</pre>
{!title && (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="absolute top-2 right-2 h-6 px-2 text-xs"
>
{copied ? (
<>
<Check className="h-3 w-3 mr-1" />
Copied!
</>
) : (
<>
<Copy className="h-3 w-3 mr-1" />
Copy
</>
)}
</Button>
)}
</div>
</div>
)
}