import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import SEOHead from '../components/seo/SEOHead';
import { useLanguage } from '../contexts/LanguageContext';
import { loadContent, type ContentItem } from '../lib/content';

export default function DocDetailPage() {
  const { slug } = useParams<{ slug: string }>();
  const { language } = useLanguage();
  const [content, setContent] = useState<ContentItem | null>(null);

  useEffect(() => {
    if (slug) {
      loadContent('docs', language, slug)
        .then(setContent)
        .catch(() => setContent(null));
    }
  }, [slug, language]);

  if (!content) {
    return (
      <div className="max-w-4xl mx-auto py-16 px-6">
        <p className="text-gray-600">{language === 'en' ? 'Loading...' : '加载中...'}</p>
      </div>
    );
  }

  return (
    <>
      <SEOHead
        title={content.meta.title}
        description={content.meta.description}
        path={`/docs/${slug}`}
      />
      <div className="max-w-4xl mx-auto py-16 px-6">
        <article
          className="prose prose-gray max-w-none"
          dangerouslySetInnerHTML={{ __html: content.html }}
        />
      </div>
    </>
  );
}