components/KnowledgeArticle.js

import { FileText, Tag, Clock, Calendar } from 'lucide-react';

export default function KnowledgeArticle({ article }) {
  return (
    <article className="brutal-card group cursor-pointer">
      {/* Category badge */}
      <div className="flex items-center gap-2 mb-3">
        <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1">
          {article.category}
        </span>
        {article.featured && (
          <span className="font-mono text-xs border-2 border-brutal-accent text-brutal-accent px-2 py-1">
            Featured
          </span>
        )}
      </div>

      {/* Title */}
      <h3 className="font-bold text-xl mb-2 group-hover:text-brutal-accent transition-colors">
        {article.title}
      </h3>

      {/* Excerpt */}
      <p className="text-sm text-brutal-gray mb-4 line-clamp-3">
        {article.excerpt}
      </p>

      {/* Tags */}
      <div className="flex flex-wrap gap-2 mb-4">
        {article.tags.slice(0, 4).map((tag) => (
          <span 
            key={tag} 
            className="font-mono text-xs flex items-center gap-1 text-brutal-gray"
          >
            <Tag size={10} />
            {tag}
          </span>
        ))}
      </div>

      {/* Footer */}
      <div className="flex items-center justify-between pt-4 border-t-2 border-brutal-black/10">
        <div className="flex items-center gap-4 font-mono text-xs text-brutal-gray">
          <span className="flex items-center gap-1">
            <Clock size={12} />
            {article.readTime}
          </span>
          <span className="flex items-center gap-1">
            <Calendar size={12} />
            {article.date}
          </span>
        </div>
        <div className="flex items-center gap-1 font-mono text-sm group-hover:translate-x-1 transition-transform">
          <FileText size={16} />
          Read
        </div>
      </div>
    </article>
  );
}