'use client';

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

export function SyncChip() {
  const { pendingCount, deadLetterCount } = useSyncState();

  if (deadLetterCount > 0) {
    return (
      <div className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
        {deadLetterCount} pedido{deadLetterCount > 1 ? 's' : ''} com erro — contacta o supervisor.
      </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" />
        {pendingCount} pedido{pendingCount > 1 ? 's' : ''} por enviar
      </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" />
      Tudo sincronizado
    </div>
  );
}