'use client';

import { useTranslations } from 'next-intl';
import { useSyncState } from './sync-provider';

export function SyncChip() {
  const t = useTranslations('sync');
  const { pendingCount, deadLetterCount } = useSyncState();

  if (deadLetterCount > 0) {
    return (
      <div className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
        {t('deadLetters', { count: deadLetterCount })}
      </div>
    );
  }

  if (pendingCount > 0) {
    return (
      <div className="flex items-center gap-2 rounded-lg bg-orange-50 px-3 py-2 text-xs text-orange-700">
        <span className="h-2 w-2 rounded-full bg-orange-400" />
        {t('pending', { count: pendingCount })}
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2 text-xs text-green-700">
      <span className="h-2 w-2 rounded-full bg-green-500" />
      {t('synced')}
    </div>
  );
}