Code Block

import { CodeBlock, Pre, SimpleCodeBlock } from '@/components/redpanda-ui/code-block';

// Basic usage with syntax highlighting
const sampleCode = `function greetUser(name: string): string {
  return \`Hello, \${name}! Welcome to Redpanda UI.\`;
}`;

export function Example() {
  return (
    <CodeBlock title="greet.ts" icon="📄">
      <Pre>
        <code className="language-typescript">{sampleCode}</code>
      </Pre>
    </CodeBlock>
  );
}

// Simplified interface for quick code blocks
export function SimpleExample() {
  return (
    <SimpleCodeBlock
      code={sampleCode}
      language="language-typescript"
      title="greet.ts"
      icon="📄"
      allowCopy={true}
    />
  );
}

// Different sizes and configurations
export function VariousExamples() {
  return (
    <>
      {/* Small code block */}
      <CodeBlock size="sm" width="sm" maxHeight="sm">
        <Pre>
          <code className="language-bash">npm install @redpanda-ui/core</code>
        </Pre>
      </CodeBlock>

      {/* Full width with no copy button */}
      <CodeBlock 
        title="config.json" 
        width="full" 
        allowCopy={false}
        onCopy={() => console.log('Code copied!')}
      >
        <Pre>
          <code className="language-json">
            {JSON.stringify({ theme: "dark", fontSize: 14 }, null, 2)}
          </code>
        </Pre>
      </CodeBlock>

      {/* Large with unlimited height */}
      <CodeBlock size="lg" maxHeight="none">
        <Pre>
          <code className="language-typescript">
            {/* Long code content here */}
          </code>
        </Pre>
      </CodeBlock>
    </>
  );
}

CodeBlock Component Structure:
┌─────────────────────────────────────────────────┐
│ Figure Container (Variants: size, width, height)│
│ ┌─────────────────────────────────────────────┐ │
│ │ Header (Conditional - if title provided)   │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ [📄] Title Text        [Copy Button]   │ │ │
│ │ │ - Icon (string/ReactNode)              │ │ │
│ │ │ - Figcaption with truncation           │ │ │
│ │ │ - CopyButton (conditional)             │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ ScrollArea (Horizontal + Vertical)          │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ ScrollViewport (Copy Detection Area)   │ │ │
│ │ │ ┌─────────────────────────────────────┐ │ │ │
│ │ │ │ Pre Element                         │ │ │ │
│ │ │ │ ┌─────────────────────────────────┐ │ │ │ │
│ │ │ │ │ Code Element                    │ │ │ │ │
│ │ │ │ │ - className: language-*         │ │ │ │ │
│ │ │ │ │ - Syntax highlighting ready     │ │ │ │ │
│ │ │ │ │ - Selection styling             │ │ │ │ │
│ │ │ │ └─────────────────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────┐ │ │
│ │ │ Horizontal ScrollBar                    │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
│                                                 │
│ Floating Copy Button (if no title)             │
│ - Positioned absolute top-right                │
│ - Backdrop blur effect                         │
└─────────────────────────────────────────────────┘

SimpleCodeBlock Wrapper:
┌─────────────────────────────────────┐
│ SimpleCodeBlock                     │
│ - Takes: code, language, props      │
│ - Auto-wraps in CodeBlock + Pre     │
│ - Simplified interface              │
│ - Ideal for backend developers      │
└─────────────────────────────────────┘