// @design-system: domain/CategoryPillGroup

'use client';

import { cn } from '@/lib/cn';
import { pickLocalized } from '@/lib/i18n';
import { FilterChip } from '@/components/ui/primitives/FilterChip';
import { ScrollRow } from '@/components/ui/layout/ScrollRow/ScrollRow';

/** A single category item for display. */
export interface CategoryItem {
  id: string;
  nameHe: string;
  nameEn: string;
}

/** Props for CategoryPillGroup */
export interface CategoryPillGroupProps {
  /** List of categories to display. */
  categories: CategoryItem[];
  /** Currently selected category id, or null if none selected. */
  selected: string | null;
  /** Called when a category is selected or deselected. */
  onSelect: (id: string | null) => void;
  /** Display locale: determines which name field is shown. */
  locale: 'he' | 'en';
  /** Additional class names. */
  className?: string;
}

/**
 * CategoryPillGroup — single-select horizontal pill group for categories.
 * Clicking the selected pill deselects it.
 * Returns null when no categories are provided.
 *
 * @example
 * ```tsx
 * <CategoryPillGroup
 *   categories={categories}
 *   selected={selectedId}
 *   onSelect={setSelectedId}
 *   locale="he"
 * />
 * ```
 */
export function CategoryPillGroup({
  categories,
  selected,
  onSelect,
  locale,
  className,
}: CategoryPillGroupProps) {
  if (!categories.length) return null;

  const toggle = (id: string) => {
    onSelect(selected === id ? null : id);
  };

  return (
    <div role="radiogroup" className={cn(className)}>
      <ScrollRow showArrows={false} gap="2" px="0" py="0">
        {categories.map((cat) => {
          const label = pickLocalized(cat, locale);
          const isSelected = selected === cat.id;
          return (
            <FilterChip
              key={cat.id}
              pressed={isSelected}
              onClick={() => toggle(cat.id)}
              aria-label={label}
            >
              {label}
            </FilterChip>
          );
        })}
      </ScrollRow>
    </div>
  );
}