import Image from 'next/image';
import Link from 'next/link';
import type { CmsSlot } from '@/components/cms/types';

export default function CmsElementCategoryNavigation({ slot }: { slot: CmsSlot }) {
  const categories: any[] = slot.data?.categories?.elements ?? slot.data?.categories ?? [];
  if (categories.length === 0) return null;
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
      {categories.map((cat: any) => (
        <Link
          key={cat.id}
          href={`/category/${cat.id}`}
          className="group relative bg-surface-50 hover:bg-surface-100 rounded-xl p-6 border border-surface-100 hover:border-surface-200 hover:shadow-sm transition-all"
        >
          {cat.media?.url && (
            <Image
              src={cat.media.url}
              alt={cat.translated?.name ?? cat.name}
              width={200}
              height={120}
              className="w-full h-24 object-cover rounded-lg mb-3"
            />
          )}
          <h3 className="font-semibold text-surface-900 group-hover:text-brand-600 transition-colors text-sm">
            {cat.translated?.name ?? cat.name}
          </h3>
        </Link>
      ))}
    </div>
  );
}