AI Markdown Renderer

"use client";

import React, { useState } from "react";
import { Copy, Check } from "lucide-react";

interface CodeBlockProps {
  language: string;
  code: string;
}

function CodeBlock({ language, code }: CodeBlockProps) {
  const [copied, setCopied] = useState(false);

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

  return (
    <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden my-3">
      <div className="flex items-center justify-between px-4 py-2 bg-zinc-100 dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-700">
        <span className="text-xs font-mono text-zinc-500">{language}</span>
        <button onClick={handleCopy} className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">
          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
          {copied ? "Copied" : "Copy"}
        </button>
      </div>
      <pre className="p-4 overflow-x-auto bg-zinc-950 text-zinc-100">
        <code className="text-sm font-mono leading-relaxed">{code}</code>
      </pre>
    </div>
  );
}

export default function AIMarkdownRenderer() {
  return (
    <div className="prose prose-zinc dark:prose-invert prose-sm max-w-none">
      <p>Here's an example of a <strong>React component</strong> that uses <code>useState</code>:</p>
      <CodeBlock
        language="tsx"
        code={`import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}`}
      />
      <p>Key features of this component:</p>
      <ul>
        <li>Uses the <code>useState</code> hook for state management</li>
        <li>Implements a simple counter with increment functionality</li>
        <li>Renders a clickable button with the current count</li>
      </ul>
    </div>
  );
}