import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { ScrollArea } from "@/components/ui/scroll-area"
import { Card } from "@/components/ui/card"

export function DocsPage() {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch('/user-guide.md')
      .then(res => res.text())
      .then(text => setContent(text))
      .catch(err => console.error("Failed to load docs:", err));
  }, []);

  return (
    <div className="container py-8">
      <Card className="max-w-4xl mx-auto">
        <ScrollArea className="h-[calc(100vh-8rem)] p-8">
          <article className="prose dark:prose-invert max-w-none">
            <ReactMarkdown remarkPlugins={[remarkGfm]}>
              {content}
            </ReactMarkdown>
          </article>
        </ScrollArea>
      </Card>
    </div>
  );
}

