import { useState } from 'react'
import { Copy, Check } from 'lucide-react'

export default function CodeBlock({ data, onUpdate }) {
  const [copied, setCopied] = useState(false)

  const code = data?.code || `function helloWorld() {
  console.log("Hello, interactive e-book!");
}`

  const handleCopy = async () => {
    await navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="my-6">
      <div className="bg-gray-900 rounded-lg overflow-hidden">
        <div className="flex items-center justify-between px-4 py-2 bg-gray-800">
          <span className="text-sm text-gray-300">JavaScript</span>
          <button
            onClick={handleCopy}
            className="flex items-center space-x-2 px-3 py-1 text-xs text-gray-300 bg-gray-700 rounded hover:bg-gray-600 transition-colors"
          >
            {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
            <span>{copied ? 'Copied!' : 'Copy'}</span>
          </button>
        </div>
        <pre className="p-4 text-gray-100 overflow-x-auto">
          <code>{code}</code>
        </pre>
      </div>
    </div>
  )
}