import { Link } from 'react-router-dom';
import SEOHead from '../components/seo/SEOHead';
import { useLanguage } from '../contexts/LanguageContext';

const docs = [
  { slug: 'getting-started', title: 'Getting Started', titleZh: '快速开始', description: 'Learn how to use TexPixel for formula recognition', descriptionZh: '了解如何使用 TexPixel 进行公式识别' },
];

export default function DocsListPage() {
  const { language } = useLanguage();
  return (
    <>
      <SEOHead title="Documentation" description="TexPixel documentation and guides" path="/docs" />
      <div className="max-w-4xl mx-auto py-16 px-6">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">{language === 'en' ? 'Documentation' : '文档'}</h1>
        <div className="space-y-4">
          {docs.map((doc) => (
            <Link key={doc.slug} to={`/docs/${doc.slug}`} className="block p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <h2 className="text-lg font-semibold text-gray-900">{language === 'en' ? doc.title : doc.titleZh}</h2>
              <p className="text-gray-600 mt-1 text-sm">{language === 'en' ? doc.description : doc.descriptionZh}</p>
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}