'use client'

import { useState } from 'react'

interface CodeBlockProps {
  code: string
  language: string
  filename?: string
  showLineNumbers?: boolean
}

export function CodeBlock({ code, language, filename, showLineNumbers = true }: CodeBlockProps) {
  const [copied, setCopied] = useState(false)

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

  return (
    <div className="not-prose my-8 border-2 border-[var(--neon-purple)] bg-[rgb(var(--bg-primary))] dark:bg-black relative overflow-hidden">
      <div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--bg-secondary))] dark:bg-zinc-950 border-b-2 border-[var(--neon-purple)] relative">
        <div className="flex items-center gap-3">
          {filename && (
            <span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">
              &gt;&gt; {filename}
            </span>
          )}
          <span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
            [{language}]
          </span>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={handleCopy}
            className="px-3 py-1 bg-[rgb(var(--bg-primary))] dark:bg-black hover:bg-purple-900/30 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase transition-all"
          >
            {copied ? '[COPIED✓]' : '[COPY]'}
          </button>
          <div className="flex gap-1">
            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
          </div>
        </div>
      </div>

      <div className="relative overflow-x-auto">
        <pre className="p-6 text-sm leading-relaxed bg-[rgb(var(--bg-primary))] dark:bg-black text-[var(--neon-cyan)] font-mono">
          <code>{code}</code>
        </pre>
      </div>
    </div>
  )
}