import React, { useState } from 'react';
import { Copy, Check } from 'lucide-react';
interface CodeBlockProps {
code: string;
language?: string;
className?: string;
}
const CodeBlock: React.FC<CodeBlockProps> = ({
code,
language = 'typescript',
className = '',
}) => {
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 code:', err);
}
};
return (
<div className={`backdrop-blur-md bg-gray-900/60 border border-gray-800 rounded-xl overflow-hidden shadow-2xl ${className}`}>
<div className="flex items-center justify-between px-4 py-2 bg-gray-900/80 border-b border-gray-800">
<span className="text-xs text-gray-500 uppercase tracking-wide font-mono">
{language}
</span>
<button
onClick={handleCopy}
className="flex items-center gap-2 px-3 py-1.5 text-xs text-gray-400 hover:text-green-400 hover:bg-gray-800/50 rounded-lg transition-colors duration-200"
aria-label="Copy code"
>
{copied ? (
<>
<Check className="w-4 h-4" />
<span>Copied!</span>
</>
) : (
<>
<Copy className="w-4 h-4" />
<span>Copy</span>
</>
)}
</button>
</div>
<div className="overflow-x-auto p-4">
<pre className="text-gray-100 text-sm font-mono leading-relaxed">
<code>{code}</code>
</pre>
</div>
</div>
);
};
export default CodeBlock;
