import Link from 'next/link';

interface BlogCategoriesProps {
  categories: Record<string, number>;
}

const categoryColors: Record<string, string> = {
  guides: 'bg-violet-500',
  tutorials: 'bg-blue-500',
  'use-cases': 'bg-pink-500',
  news: 'bg-emerald-500',
  engineering: 'bg-blue-500',
  product: 'bg-purple-500',
  design: 'bg-green-500',
  culture: 'bg-orange-500',
};

export const BlogCategories = ({ categories }: BlogCategoriesProps) => {
  const entries = Object.entries(categories);

  if (entries.length === 0) {
    return null;
  }

  return (
    <div className="rounded-xl bg-[#111827] border border-white/5 p-6">
      <h4 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
        Categories
      </h4>
      <nav className="flex flex-col space-y-1">
        {entries.map(([category, count]) => {
          const dotColor = categoryColors[category] || 'bg-gray-500';
          return (
            <Link
              key={category}
              href={`/blog?category=${category}`}
              className="flex items-center justify-between px-3 py-2 rounded-lg text-sm text-gray-300 hover:bg-white/5 hover:text-white transition-colors group"
            >
              <div className="flex items-center gap-2">
                <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
                <span className="capitalize">{category}</span>
              </div>
              <span className="text-xs bg-white/5 px-2 py-0.5 rounded text-gray-500 group-hover:text-gray-300 transition-colors">
                {count}
              </span>
            </Link>
          );
        })}
      </nav>
    </div>
  );
};
