/**
 * SyncIndicator — a minimal coffee-cup icon that communicates sync results.
 *
 * Success: outlined cup → steam rises → checkmark appears → fades out (~2.4s)
 * Offline: outlined cup + subtle "!" warning, stays visible.
 */
export default function SyncIndicator({ isOnline, syncing, showSyncedStatus }) {
  const showSuccess = isOnline && showSyncedStatus && !syncing;
  const showOffline = !isOnline;

  if (!showSuccess && !showOffline) return null;

  return (
    <div
      className={showSuccess ? "sync-cup-success" : undefined}
      title={showOffline ? "Offline — data saved locally" : "All data synced"}
    >
      <svg
        viewBox="0 0 24 24"
        width="28"
        height="28"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {/* ── Cup body ── */}
        <g className="text-[#9C8B7A] dark:text-[#C8B9A6]">
          <path
            d="M5 9h10v6.5a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9z"
            stroke="currentColor"
            strokeWidth="1.5"
          />
          <path
            d="M15 11h1a2 2 0 0 1 0 4h-1"
            stroke="currentColor"
            strokeWidth="1.5"
          />
        </g>

        {/* ── Steam lines (success only) ── */}
        {showSuccess && (
          <g className="text-[#9C8B7A] dark:text-[#C8B9A6]" stroke="currentColor" strokeWidth="1.2">
            <path className="sync-steam sync-steam-1" d="M8 7 Q8.7 5.5 8 4.5 Q7.5 3.8 8.2 3" />
            <path className="sync-steam sync-steam-2" d="M10 6.5 Q10.7 5 10 4 Q9.5 3.3 10.2 2.5" />
            <path className="sync-steam sync-steam-3" d="M12 7 Q12.7 5.5 12 4.5 Q11.5 3.8 12.2 3" />
          </g>
        )}

        {/* ── Checkmark (success only) ── */}
        {showSuccess && (
          <polyline
            points="7.5,14 9.5,16 13,12"
            className="sync-check text-[#4A7C59] dark:text-[#6CB281]"
            stroke="currentColor"
            strokeWidth="1.8"
          />
        )}

        {/* ── Warning indicator (offline only) ── */}
        {showOffline && (
          <g className="text-[#B44040] dark:text-[#E55B5B]" style={{ opacity: 0.85 }}>
            <line x1="10" y1="12" x2="10" y2="15.5" stroke="currentColor" strokeWidth="1.8" />
            <circle cx="10" cy="17.2" r="0.8" fill="currentColor" stroke="none" />
          </g>
        )}
      </svg>
    </div>
  );
}
