import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useState, useEffect } from 'react';
import LoadingSpinner from '../components/LoadingSpinner';

export default function Article() {
  const { articleId } = useParams();
  const { i18n } = useTranslation();
  const [article, setArticle] = useState<{
    content: string;
    metadata: any;
  } | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // In a real application, we would fetch the article content here
    // based on the articleId and current language
    console.log(`Fetching article ${articleId} in ${i18n.language}`);
    setLoading(false);
  }, [articleId, i18n.language]);

  if (loading) {
    return <LoadingSpinner />;
  }

  if (!article) {
    return <div>Loading...</div>;
  }

  return (
    <article className="max-w-4xl mx-auto">
      <div className="prose dark:prose-invert max-w-none">
        <div dangerouslySetInnerHTML={{ __html: article.content }} />
      </div>
    </article>
  );
}