// Plaaayground v2 — CodeBlock
// Blueprint: 05 — Styled pre block with language label + copy button
// Note: Install react-syntax-highlighter for full highlighting in production

import { CopyButton } from "./CopyButton";
import { cn } from "@/lib/utils";

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

export function CodeBlock({
  code,
  language,
  showLineNumbers = false,
  className,
}: CodeBlockProps) {
  const lines = code.split("\n");

  return (
    <div className={cn("relative group border border-border overflow-hidden", className)}>
      <div className="flex items-center justify-between px-4 py-2 bg-secondary/50 border-b border-border">
        {language && (
          <span className="text-xs text-muted-foreground font-mono">{language}</span>
        )}
        <div className="ml-auto">
          <CopyButton value={code} />
        </div>
      </div>
      <pre className="overflow-x-auto p-4 text-sm font-mono bg-card">
        <code>
          {showLineNumbers
            ? lines.map((line, i) => (
                <div key={i} className="flex">
                  <span className="select-none text-muted-foreground/40 w-8 text-right mr-4 flex-shrink-0">
                    {i + 1}
                  </span>
                  <span>{line}</span>
                </div>
              ))
            : code}
        </code>
      </pre>
    </div>
  );
}
CodeBlock

Source Code
