import { Card, CardContent } from "@/components/ui/card";

interface AIMessageMarkdown01Props {
    htmlContent?: string; // HTML string content for AI response
}

export default function AIMessageMarkdown01({
    htmlContent = `
    <h1>Hello from ChatGPT</h1>
    <p>This is a rich AI response with <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
    <h2>Code Example</h2>
    <pre><code class="language-ts">
function greet(name: string) {
  return \`Hello, \${name}!\`;
}
console.log(greet("World"));
    </code></pre>
    <h2>Features</h2>
    <ul>
      <li>Lists support</li>
      <li>Tables support</li>
      <li>Links: <a href="https://ui.shadcn.com" target="_blank">ShadCN UI</a></li>
    </ul>
    <table>
      <thead>
        <tr>
          <th>Feature</th>
          <th>Supported</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Code blocks</td>
          <td>✅</td>
        </tr>
        <tr>
          <td>Tables</td>
          <td>✅</td>
        </tr>
        <tr>
          <td>Lists</td>
          <td>✅</td>
        </tr>
      </tbody>
    </table>
  `,
}: AIMessageMarkdown01Props) {
    return (
        <Card className="border-0 w-full">
            <CardContent className="p-0">
                <div
                    className="prose max-w-full dark:prose-invert"
                    dangerouslySetInnerHTML={{ __html: htmlContent }}
                />
            </CardContent>
        </Card>
    );
}