import { cn } from '@/lib/cn';

export interface StaticCodeBlockProps {
  code: string;
  language?: string;
  label?: string;
  className?: string;
}

/**
 * Server-only variant of CodeBlock — no copy button, no client hydration.
 *
 * Use this for above-the-fold marketing content where every kilobyte of
 * JS hurts LCP. The interactive CodeBlock pulls in lucide-react icons and
 * a useState boundary that forces an entire client chunk to load before
 * Lighthouse considers the element "rendered". This static variant is
 * pure SSR markup and lets the browser paint as soon as the HTML arrives.
 *
 * CodeBlock (with copy button) stays in use for dashboard pages where
 * users actually want to copy snippets.
 */
export function StaticCodeBlock({ code, language, label, className }: StaticCodeBlockProps) {
  return (
    <div className={cn('panel-subtle relative overflow-hidden', className)}>
      {(label || language) && (
        <div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
          <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
            {label ?? language}
          </span>
        </div>
      )}
      <pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
        <code>{code}</code>
      </pre>
    </div>
  );
}