// app/components/admin/sidebar-widgets/CategoriesWidget.tsx
'use client';
import { CategoriesWidgetProps } from '@/lib/page-builder/container-types';

export default function CategoriesWidget({ title = 'Categories', categories = [] }: CategoriesWidgetProps) {
  return (
    <div className="sidebar-widget">
      {title && <h3 className="text-base font-semibold text-gray-900 mb-3 pb-2 border-b">{title}</h3>}
      <ul className="space-y-2">
        {categories.map(cat => (
          <li key={cat.id}>
            <a
              href={cat.link}
              className="flex items-center justify-between text-sm text-gray-700 hover:text-blue-600 transition-colors group"
            >
              <span className="group-hover:underline">{cat.name}</span>
              <span className="bg-gray-100 text-gray-500 text-xs px-2 py-0.5 rounded-full">{cat.count}</span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}