'use client';

import { useLocale, useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';
import type { Config } from './config';

interface Data {
  activeSlug: string | null;
}

/**
 * category-chips Component
 * Horizontal row of chip links for category browsing.
 * Active chip highlighted from ctx.routeParams.slug (via loadData).
 * Clicking a chip navigates to /category/<slug>.
 */
export function Component({ config, data }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const t = useT('category_chips');
  const { activeSlug } = (data as Data | null) ?? { activeSlug: null };

  if (config.categories.length === 0) return null;

  return (
    <div className="bg-accent-warm-50 mx-6 mt-4 rounded-2xl px-4 py-3">
      <nav aria-label={t('nav_label')} className="flex gap-2 overflow-x-auto pb-0">
        {config.categories.map((cat) => {
          const active = cat.slug === activeSlug;
          return (
            <a
              key={cat.slug}
              href={`/category/${cat.slug}`}
              aria-current={active ? 'page' : undefined}
              className={cn(
                'border-border-default bg-surface-raised inline-flex items-center gap-1 whitespace-nowrap rounded-full border px-3 py-2 text-sm font-semibold',
                active && 'border-mode-customer-300 bg-mode-customer-50 text-mode-customer-700',
              )}
            >
              {cat.label[locale] || cat.label.he}
            </a>
          );
        })}
      </nav>
    </div>
  );
}