import type { FunctionalComponent } from 'preact';

import { cn } from '../../core/cn';

type ElementMetaBadgesProps = {
  t: (key: string, fallback?: any) => string;
  count?: number;
  className?: string;
  statusLabel?: string;
  statusBadge?: string;
};

export const ElementMetaBadges: FunctionalComponent<ElementMetaBadgesProps> = ({ t, count = 0, className, statusLabel, statusBadge }) => {
  const countLabel = statusLabel || (count > 0
    ? `${count} ${count > 1 ? t('elements.instances', 'instances') : t('elements.instance', 'instance')}`
    : '');
  const badgeLabel = statusBadge || (count > 0 ? t('elements.inView', 'In view') : '');

  if (!countLabel && !badgeLabel) return null;

  return (
    <span className={cn('ask-elements-module__meta ask-flex ask-min-w-0 ask-items-center ask-gap-2 ask-text-[11px] ask-text-textMuted', className)}>
      <span className="ask-elements-module__meta-count ask-truncate">{countLabel}</span>
      {badgeLabel ? (
        <>
          <span className="ask-h-1 ask-w-1 ask-shrink-0 ask-rounded-full ask-bg-borderSubtle" aria-hidden />
          <span className="ask-shrink-0 ask-font-medium ask-text-primary">{badgeLabel}</span>
        </>
      ) : null}
    </span>
  );
};
