'use client';

/**
 * CodeBlock Component
 *
 * Wrapper for displaying syntax-highlighted code blocks in documentation.
 * Uses the existing Banatie design pattern from the landing page.
 *
 * Design Features:
 * - MacOS-style window with traffic light dots
 * - Dark slate background with backdrop blur
 * - Copy button in top-right
 * - Scrollable code area
 * - Optional language label
 */

import { useState } from 'react';

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

export const CodeBlock = ({
  code,
  language = 'bash',
  filename,
  showLineNumbers = false,
}: CodeBlockProps) => {
  const [copied, setCopied] = useState(false);

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

  return (
    <div className="bg-slate-950/50 rounded-xl border border-slate-700 overflow-hidden my-4">
      {/* Header with traffic lights and copy button */}
      <div className="flex items-center justify-between bg-slate-900/50 px-4 py-2.5 border-b border-slate-700">
        <div className="flex items-center gap-2">
          <div className="flex gap-1.5">
            <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
            <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
            <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
          </div>
          {(filename || language) && (
            <span className="text-sm text-gray-500 ml-2">{filename || language}</span>
          )}
        </div>
        <button
          onClick={handleCopy}
          className="px-3 py-1 text-xs bg-purple-600/20 hover:bg-purple-600/30 text-purple-400 rounded transition-colors"
          aria-label="Copy code"
        >
          {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>

      {/* Code content */}
      <pre className="p-4 text-sm text-gray-300 overflow-x-auto">
        <code>{code}</code>
      </pre>
    </div>
  );
};
