'use client';

import { CodeBlock } from '@/components/code-block';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { useState } from 'react';

/**
 * Client island: the "audit the generated code before you fork" toggle. Kept
 * out of the server-rendered page so the page itself stays static + indexable.
 */
export function CollapsibleCode({ code }: { code: string }) {
  const [show, setShow] = useState(false);
  return (
    <section className="mt-10">
      <button
        type="button"
        onClick={() => setShow((s) => !s)}
        className="inline-flex items-center gap-1 text-[14px] font-semibold tracking-tight text-[--color-fg] transition-colors hover:text-[--color-fg-muted]"
      >
        {show ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
        Generated code ({code.length} chars)
      </button>
      <p className="mt-1 text-[12px] text-[--color-fg-muted]">
        Audit before you fork. We re-scan every published template for banned patterns (eval,
        child_process, prompt-injection markers).
      </p>
      {show && (
        <div className="mt-3">
          <CodeBlock label="src/server.ts" code={code} />
        </div>
      )}
    </section>
  );
}