import type { LabelView } from '@dorfteich/shared';
import { useTranslation } from 'react-i18next';

import { contrastingTextColor } from './label-color';

/**
 * Colored label chips for a page (issue #44). Labels are looked up by id in the
 * pond's label tree, so a chip renders only for a label still present. Purely
 * presentational — used on sidebar page entries.
 */
export function LabelChips({
  labelIds,
  byId,
}: {
  labelIds: string[];
  byId: Map<string, LabelView>;
}): React.JSX.Element | null {
  const { t } = useTranslation('labels');
  const labels = labelIds.map((id) => byId.get(id)).filter((l): l is LabelView => Boolean(l));
  if (labels.length === 0) return null;

  return (
    <span className="label-chips">
      {labels.map((label) => (
        <span
          key={label.id}
          className="label-chip"
          style={{ backgroundColor: label.color, color: contrastingTextColor(label.color) }}
          title={label.name}
          aria-label={t('chip.ariaLabel', { name: label.name })}
        >
          {label.name}
        </span>
      ))}
    </span>
  );
}