import Layout from '../components/Layout';
import KnowledgeArticle from '../components/KnowledgeArticle';

const articles = [
  {
    id: 1,
    title: 'Introduction to Large Language Models',
    category: 'AI/ML',
    excerpt: 'A comprehensive guide to understanding LLMs, their architecture, transformers, attention mechanisms, and practical applications in modern software development.',
    readTime: '15 min',
    date: 'Dec 10, 2024',
    tags: ['LLM', 'AI', 'NLP', 'Transformers'],
    featured: true,
  },
  {
    id: 2,
    title: 'Building RAG Applications from Scratch',
    category: 'Engineering',
    excerpt: 'Learn how to build production-ready Retrieval Augmented Generation systems with modern tools like LangChain, Vector DBs, and embeddings.',
    readTime: '20 min',
    date: 'Dec 8, 2024',
    tags: ['RAG', 'Vector DB', 'LangChain'],
  },
  {
    id: 3,
    title: 'Fine-tuning LLaMA 3 for Custom Tasks',
    category: 'AI/ML',
    excerpt: 'A deep dive into fine-tuning Meta LLaMA 3 on custom datasets using QLoRA and PEFT techniques for efficient model adaptation.',
    readTime: '25 min',
    date: 'Dec 5, 2024',
    tags: ['LLaMA', 'Fine-tuning', 'PEFT'],
    featured: false,
  },
  {
    id: 4,
    title: 'Vector Databases: A Practical Comparison',
    category: 'Database',
    excerpt: 'Compare Pinecone, Weaviate, Milvus, Chroma and other vector databases for your AI applications with performance benchmarks.',
    readTime: '18 min',
    date: 'Dec 3, 2024',
    tags: ['Vector DB', 'Pinecone', 'Weaviate'],
  },
  {
    id: 5,
    title: 'Building AI Agents with AutoGen',
    category: 'Agents',
    excerpt: 'Create autonomous AI agents using Microsoft AutoGen framework for complex multi-agent workflows and task automation.',
    readTime: '22 min',
    date: 'Nov 28, 2024',
    tags: ['Agents', 'AutoGen', 'Automation'],
  },
  {
    id: 6,
    title: 'Prompt Engineering Best Practices',
    category: 'Prompt Engineering',
    excerpt: 'Master the art of crafting effective prompts for LLMs including chain-of-thought, few-shot learning, and role-playing techniques.',
    readTime: '12 min',
    date: 'Nov 25, 2024',
    tags: ['Prompts', 'Best Practices', 'LLM'],
  },
];

const categories = ['All', 'AI/ML', 'Engineering', 'Database', 'Agents', 'Prompt Engineering'];

export default function Knowledge() {
  return (
    <Layout title="Knowledge Base" subtitle="Articles & Tutorials">
      {/* Categories */}
      <div className="mb-8 flex flex-wrap gap-2">
        {categories.map((category) => (
          <button
            key={category}
            className={`
              font-mono text-sm px-4 py-2 border-2 transition-all
              ${category === 'All' 
                ? 'bg-brutal-black text-brutal-white border-brutal-black' 
                : 'border-brutal-black hover:bg-brutal-black hover:text-brutal-white'
              }
            `}
          >
            {category}
          </button>
        ))}
      </div>

      {/* Articles Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((article) => (
          <KnowledgeArticle key={article.id} article={article} />
        ))}
      </div>

      {/* Pagination */}
      <div className="mt-12 flex justify-center gap-2">
        <button className="brutal-btn">Previous</button>
        <button className="brutal-btn bg-brutal-black text-brutal-white">1</button>
        <button className="brutal-btn">2</button>
        <button className="brutal-btn">3</button>
        <button className="brutal-btn">Next</button>
      </div>
    </Layout>
  );
}