import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import ArticleCard from './ArticleCard';

const CATEGORY_INFO = {
  'ai-tools':   { label: 'AI Tools',   icon: '🤖', accent: 'text-emerald-600 dark:text-emerald-400', border: 'border-emerald-200 dark:border-emerald-900' },
  'cybersec':   { label: 'Cybersec',   icon: '🔒', accent: 'text-red-600 dark:text-red-400',         border: 'border-red-200 dark:border-red-900' },
  'automation': { label: 'Automation', icon: '⚡', accent: 'text-amber-600 dark:text-amber-400',     border: 'border-amber-200 dark:border-amber-900' },
  'ai-dev':     { label: 'AI Dev',     icon: '💻', accent: 'text-blue-600 dark:text-blue-400',       border: 'border-blue-200 dark:border-blue-900' },
};

/**
 * Категорийный ряд: заголовок + 3 карточки + «все →».
 * Показываем только если в категории есть хотя бы 1 статья.
 */
export default function CategoryRow({ category, articles }) {
  if (!articles || articles.length === 0) return null;
  const info = CATEGORY_INFO[category] || { label: category, icon: '📝', accent: 'text-neutral-700', border: 'border-neutral-200' };

  return (
    <section className={`container-wide pb-10`}>
      <div className={`flex items-end justify-between mb-5 pb-3 border-b ${info.border}`}>
        <div className="flex items-center gap-2">
          <span className="text-2xl">{info.icon}</span>
          <h2 className={`text-xl sm:text-2xl font-bold ${info.accent}`}>{info.label}</h2>
        </div>
        <Link href={`/category/${category}`} className={`text-sm font-medium inline-flex items-center gap-1 ${info.accent} hover:opacity-80 transition-opacity`}>
          Все материалы <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {articles.map(a => <ArticleCard key={a.id} article={a} />)}
      </div>
    </section>
  );
}